Tutorial | Create a Dynamic Multi-Image Slider

Hey, thanks for the great example for CMS sliders. Is there any chance you can help customize this code to get a multiple-image field slider inside a CMS based product page. I would like to switch trough the images in our product overview and have everything build by it self with Webflows CMS

Hi! Thank you for putting up this great tutorial. Is there a way to open an image from the slide separately if you click on it?

Hey! I just want to ask if there’s any way you can centre the images (or apply css to those images), I’ve been trying for a while and I’m having no luck.

https://preview.webflow.com/preview/swiftdropthat?utm_medium=preview_link&utm_source=designer&utm_content=swiftdropthat&preview=ae0caee3dfa2ebb5acffa9afecff4ddd&pageId=60167d0cbe8e9e18cb406122&itemId=601c3333a8988fb53f76f2dc&mode=preview

Hi, I’m having problems with this I followed the tutorial but when I got to the section where I input the multi-image collection there’s no option for it only the solo images. any help would be more than appreciated

edit: I’ve figured out where I went wrong but now I’ve got to step 7 and when I look at the site in the preview nothing shows is that just in preview and the code does work when published?

1 Like

Hey ~ thank you very much, but Is it possible to make this work NOT on collection pages, but the homepage for example?
https://michaelbodiam.com has a homepage with all these CMS projects there, and each project is just a slider loading all the must images. Can this be done with your technique?

1 Like

Hi! I have installed this on my site but it is not working :frowning:

Here is the preview link:
https://preview.webflow.com/preview/parchaus?utm_medium=preview_link&utm_source=designer&utm_content=parchaus&preview=2ef14b5153228405fbc9c0d26b0e7224&pageId=60aec481763a53ead80d0626&itemId=60aec48b0b986b6096bf2f51&workflow=preview

Hi @WillNeeteson did you manage to get the custom code to do this?

For some reason this works no problem on some of my pages but not on others

I believe I’ve followed the steps to the detail, would you mind checking on this for me to see if I’m doing something wrong?

This is a really useful resource and I hope it will be useful to troubleshoot solutions so that more people can make use of it!

::Read-Only Link::

For some reason when I implement this, my slider is limited to only 5 slides when I have 25 images in the CMS item’s multi image category. Any way to allow all the slides to display?

@Eli11 How do I make this responsive? The feature works great but resizing the browser and on mobile I can’t seem to get the image to resize. The slider will resize but the contained image stays fixed causing the slider to crop the image. Please help.

Same issue here, how to show the multi-images in the slider, please? I only have access to the main image…

Any update on this? Have you found the solution Marvin, please?

I made progress to a point where more problems came to play because of combining multiple scripts which were added to the body codes of the page. I did get it responsive and also showing multiple images, but more problems arose. Enough for me to revert back and try something else.

Agree! I just hustle to make it responsive + too much script which will down the speed of my page. I would like to find an alternative to the Webflow lightbox but it seems nothing come out yet…

Hey, thanks for the tutorial.
I’m having an issue with the collection item, I am not able to bind it with the cms collection.
So i created a CMS collection “Gallery” and added the multi-image field. Inside I created a new Gallery and added the images in the multi-image field. But when I want to bind it with the collection item component it cant seem to find it!

Any suggestions?

I just found out that if I create a new collection for every image (inherently not using multi-image field, but single-image), it works. but that’s time-consuming.

Hi, Awesome tutorial and it work so easy! :slight_smile: I do however struck some difficulties.

I use your code and slider for my e-commerce items. On a category page where I display many items in different categories, the slider only works for one item. Is it possible for you to tell me why? Is the code not working for multiple items?

Thanks,

Daniel

1 Like

Hey everyone!

Just noticed a small bug with the tutorial. The code input section gives this script:

<script src="https://gist.github.com/Eli-Shmerler/9a60a9cb01d5b15d0a8a99016a7f3fb5.js"></script>

I published and found the actual script that needs to be copy and pasted at the bottom of my cms page, here it is>

<script>
(function () {
    var sliderId = 'MultiImageSlider';
    var collectionListWrapperId = 'MultiImageCollectionWrapper';
    var slideClass = 'w-slide';
    var leftArrowClass = 'w-slider-arrow-left';
    var rightArrowClass = 'w-slider-arrow-right';
    var slideNavClass = 'w-slider-nav';
    var collectionItemClass = 'w-dyn-item';
    
    var $slider = $('#' + sliderId);
    var $slides = $slider.find('.' + slideClass);
    var $collectionWrapper = $('#' + collectionListWrapperId);
    var $images = $collectionWrapper.find('.' + collectionItemClass);
    if ($slider && $collectionWrapper) {
        $slider.css('opacity', 0);
        if (!$images || !$images.length) {
            $slider.remove();
        }
        else {
            var imgCount = $images.length;
            var slideCount = $slides.length;
            if (imgCount > slideCount) imgCount = slideCount;
            for (var i = 0; i < imgCount; i++) {
                $slides[i].style.backgroundImage = $images[i].style.backgroundImage;
            }
            for (var i = slideCount; i > imgCount; i--) {
                $slides[i - 1].remove();
            }

            if (imgCount < 2) {
                $slider.find('.' + leftArrowClass + ', .' + rightArrowClass + ', .' + slideNavClass).remove();
            }
            $slider.css('opacity', 1);
        }
        $collectionWrapper.remove();
    }   
})();
</script>

Thanks a million for this @Eli11 , really appreciate your work on this!

1 Like

Anyone else having issues with the images resizing? The ‘cover’ and position ‘centre’ options in step 2 don’t seem to be affecting it, making it impossible to make responsive. Anyone have a work-around?

Hi Eli, thanks this works great! I am trying to implement this twice on the same page, is it possible to do this? It didn’t work so far…

Thanks in advance! Hessel

1 Like