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
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.
Although not exactly the same, our latest project section on this site is an example http://paul-themes.com/html/liarch/home-default.html
If you wish to make a design like the img below :
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 :
Here is the code of my example
HTML :
CSS :