Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

199
Views
How can I make a slider like in the image? Scrollable and with text and images

I want to make a slider with a scrollable right-justified image and text like in the image, how can I do this? https://prnt.sc/26mtj6v

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

I am sending a sample site and picture, you can check it. The image I sent has a scrollable image and a box section for text. Half of the 2nd image will be visible and when you slide to the left in the slider logic, 2 images will come to the front and the text inside the box will change.

https://prnt.sc/26mtuw6

Although not exactly the same, our latest project section on this site is an example http://paul-themes.com/html/liarch/home-default.html

about 4 years ago · Juan Pablo Isaza Report

0

If you wish to make a design like the img below :

objective


For the images of my code below, I'm using Bootstrap 5.1.3 (the class names are mostly from the framework)

1) you will need to use some display: flex on a container in order to have elements in a row and next to each other (create it in your CSS to use that, if you're not using the Bootstrap Framework). Also, add a width:100% on that container in order for it to take the whole space (it's the w-100 class from Bootstrap, or else, add it in your personnal CSS - here 100% is 100% of body)

2) you will need to make that container scrollable with a overflow-x:scroll

3) you will need to create a block (div) for your title and paragraph that needs to be in position: absolute and give it top/bottom/right/left coordinates

5) you will need your container to be in position: relative, so the title/paragraph (step 3) is placed depending on the container

6) you will need to give your imgs a width sufficiently big enough for the scroll to actually start working (you need the elements inside your container to be larger than the container's total width so it becomes scrollable)


This is a quick example I made :

example


Here is the code of my example

HTML :

HTML

CSS :

CSS

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!