Pls folks, kindly give me a slider that supports 2 images at a time like in this moc up
Preformatted textAre you looking for a pure CSS slider? (You have posted in the HTML/CSS category.)
Have you done any searches for one like this? Your original question really sounds like you want us to do all the work of finding or building this slider for you. Let us know what you have done so far to find a slider so we can give you a hand with anything that you get stuck with.
Well, pure CSS
Hello folks,
I need a comparison slider with pair of image at one time then other pair⌠what I already have is this slider http://cssslider.com/ in which there is no two images this is only text over the image.
@WebMachine please I have also found this http://www.htmldrive.net/items/demo/1477/TwentyTwenty-slider-moves-across-the-image but it is unmovable⌠Please help
Where are the 2 images in the mock up?
Is that your mock up or have you been asked to build it?
Is this a new question or just important information that you failed to mention on your first post?
I donât think you are going to find anything âoff the shelfâ as most of the ones Iâve seen are static and not on a carousel.
Someone asked a question the other day and I put up a very simple demo of static comparison slider.
@PaulOB
Of course I missed out⌠besides, I think my question is still clear; in the moc up I provided, you can see img1 has the text: âHow wild animalsâŚâ & img2 has the text: Mostly cloudyâŚ". Thus, could you kindly give me a comparison slider with pair of image at one time then other pairs & movable?
My kindest regards!
If you want two images side-by-side, then both images should move to be replaced by another pair of images, would it not be easier simply to create a series of double images to start with, which you could use in any slider?
Please, would you make it clear in codePen?
What isnât clear?
Instead of creating each image separately, you can use any graphics editor to join each pair of images into a single image. Now you can use these single images in any slider.
Nope you misunderstood me am not making a two in one image instead with two imgs placed side-by-side one should move to be replaced by another different img followed by the other in that order. Thanks for the clarity anyway.
So you only want one image at a time to move? The slider should start off showing images 1 and 2, then 2 and 3, 3 and 4, etc.?
Correct
Sorry you lost me again. I thought I knew what you wanted but now Iâ'm not so sure.
You will need to start answering the questions I pose .
To recap:
Are you looking for the function shown in my last codepen where a line moves across the image to reveal an image underneath?
You then seem to suggest that you want to swap those images for another pair? If so how do you envisage this happening? Is the user going to have forward and back buttons to accomplish this?
It seems like you want someone to build you a custom interface from scratch but that is not really what we are here for.
Perhaps you can clarify what you are doing here and why you need a comparison slider?
I think the word âcomparisonâ is misleading here, and causing confusing. (It certainly confused me.)
As I understand it, @vfbennyme doesnât want particular pairs of images side-by-side for comparison. What he wants is a slider which will show two images at a time, but move on by just one image each time. So images #1 and #2 appear, then #1 disappears, #2 moves into its place and #3 appears where #2 was - and so on. There is no âcomparisonâ; merely two images on screen at the same time.
I was looking at the link the OP gave which is actually a âComparison Sliderâ (drag the bar to see the 2 images).
Thatâs why I got confused with the other comments:)
Pls, look into this perhaps it would save all of us the time and energy http://www.jssor.com/demos/carousel-slider.slider though there seems way too many images so hard for me to to liken it to what @TechnoBear said (which was what I meant).
Hope this helps.
Iâm not at all sure it does help.
That carousel displays four images, then all four move on and are replaced by a totally different set. That is not the behaviour you said you wanted.
I donât recall ever seeing a carousel which works as you describe, so I think you are unlikely to find a ready-made script that does exactly what you want. You may need to adapt or create one of your own.
Yes you were right, It has succeeded with a custom code.
I may be late to the party but I think this article (Styling Effective Carousels) should help you achieve what youâre looking for.
Look at the last example at the bottom of that page.