This is great, thank you Jason!
Second thing I noticed. Is that in some cases all the slides are shown and all dots are in the bottom nav. But after a refresh or resizing of the browser the dots are correct to the amount of images in the CMS. Probably something to do with the script being load before the slides. Is there a way to delay the line of code to first load the slider and then calculate the amount of slides.
Just wanted to thank you for this solution, works like a charm!
@jasondark I’m hoping you or someone here can tweak this setup to take advantage of Webflow’s Responsive Images. Unfortunately the “background images” are not optimize the same way “Images” are yet and my client keeps seeing blurry photos.
Here is my read only link
You could alter the code and create an image in each slider, then set its src. Then you would avoid using background images.
@jasondark would you be able to alter the code to take advantage of responsive images and paste example here to copy? Unfortunately, I really wouldn’t know where to start (having followed your previous example as closely as possible).
In any case, knowing that it is possible is exciting! Thanks for your suggestion
first of all thank you for the great example and the possibility to easy make a clone. My question is, is it possible to have more than one slider on one page? I would like to make two different sliders.
Thanks for your help,
Hi yes it would be but you would need to alter the script to detect multiple sliders and bind each collection of images to its appropriate slider with some sort of tag so that you can merge them together correctly.
Thank you for this amazing code.
It’s going to improve an open article page on a site that I’m working on.
I did everything like in your example, but unfortunately, it doesn’t work (probably somewhere I missed something). In the console, it shows this error – Monosnap.
I’m pretty weak in .js code, so can take a look, and maybe you can help me with this issue?
BTW thank you once again for a great solution
Ok, so I figured out what was wrong
I didn’t assign slider attributes for slider left-right buttons. After assigning it – everything starts to work well.
So in case if someone will face a similar problem – here are attributes, that you should assign in your slider:
data-cms=“image” – to CMS images that should be inside of each slide
data-cms="slider – to slider main component
data-cms=“slide” – to each slide block inside of slider element
data-cms=“left-arrow” – to slider left arrow
data-cms=“right-arrow” – to slider right arrow
Also, I have met one more problem
If there is only one image inside of the slider, and we try to drag that image – we will go through all slides that we create in our file.
To disable drag gesture we need to add this code in our body:
@jasondark thank you one more time for such a great slider integration solution
Has anyone figured out how to do a nested multi-image slider? I’m trying to create a projects page that loads a modal with a slider for each project of images.
Thanks so much!
Also want to thank you for sharing this!