Hey Community,
I’m looking to build a slider that has the main image center with the left and right images off-page on the right and left.
EX:
This should be easy, I’m just hoping that someone has a quick tutorial or video reference for me.
Thanks Ya’ll!
Personally I’d recommend going with a non-native slider option like SwiperJS or Splide — both of them require a bit of code but offer more functionality and can be used with CMS content fairly easily.
As far as examples, the Showcase is always a good place to check for Webflow build references. A quick search for “slider” with the clonable toggle selected gave me the result below which looks fairly similar and uses the native slider:
I’m sure there are some other alternatives in the list, the one above was just the first example that caught my eye. I’ve included the page below for quick reference:
Let me know if you have any other questions or run into any issues 
Do you know if there is a way to start on slide #2? so that there is an image on both sides?
I’m not sure of any way to do that myself — that sort of control is why I prefer using non-native options as Webflow’s slider component is farily limited.
Hey all, (specifically @PeterDimitrov),
I’ve managed to setup my slider to look how I want it and now what I’m realizing is that the slider starts off on slide 1. Which is cool but doesn’t give me the look that I’ve going for.
I’ve see multiple threads with code that is supposed to force slide 2 to display first, which should end up looking something like:
The code is:
$(document).ready(function() {
$(‘#sliderId div:nth-child(slideNumber)’).trigger(‘tap’);
});
#sliderId and (slideNumber) needs to be replaced. But I’ve done this a million times in a million different ways and cannot get it to work.
I’m hoping someone can help.
Read only-link
Click here
Live Link
Click Here
If you check the console on the live site you’ll see that it’s throwing an error:
Because the code you referenced uses jQuery, you’ll need to add it to the second custom code section on the page (before tag) so it comes after Webflow’s included jQuery script tag.
After you make that change, make sure you’ve added you’re ID to the slider element — right now I’m not seeing that applied to your slider:
Hey @mikeyevin
Yeah, I can’t get this to work, I’m unsure of what Im doing wrong. Here is what I’ve done:
Slider ID: slider
Slide #: is-2
Script:
Script Error:
So yeah, I don’t know what is going on here.
Your CSS selector for nth-child looks to be incorrect — it should read as nth-child(2) not nth-child(is-2).
Try the code below and see if that fixes the error:
<script>
$(document).ready(function() {
$('#slider div:nth-child(2)').trigger('tap');
});
</script>
That worked. I was using “is-2” because that was the id that I gave it thinking I needed to do that.
Simply using (2) worked perfectly.
Thank you very much for helping work through that issue with me.