Tutorial | Create a Dynamic Multi-Image Slider

Is the creator of this great script still alive?

Hey @Daniel_Remes1 Did you find a solution to this? I have been facing the same issue.

Hey Eli, I hope this thread is still active as I really need your help! Thank you so much for this walkthrough, it almost worked perfectly for me, however, when I publish the page the height of the slider is contained to a fixed height for no reason. Therefore, only a sliver of the image is viewable. I tried setting the height of the slider element to “Auto” and it made the images not even show. What can I do to fix this problem? Again, thank you for your time and I hope this can be resolved.

I have attached my read only link below, along with a screen shot of the issue with the height property.

Read Only Link

Can you send this link again this preview is not working now i think.

Hi! I’ve installed this on my site and it’s not working :frowning:

Here’s a preview: https://preview.webflow.com/preview/zacs-real-deal-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=zacs-real-deal-portfolio&preview=5c08a427dce48328c2c0dcf8fa19099d&pageId=61772390fe13ff42b6199fe8&itemId=62bc9bcd8185053af4d0d2db&workflow=preview

Thanks for the help!

What’s up with this Webflow??! Is it seriously not possible in a so-called professional website design tool to have a dynamic slider with slider items based on multi-image CMS fields???! This is like super basic and very expected funtionality.

1 Like

Is this still possible to do? I’ve spent the last 3 hours trying to find the “Multi-Image” option in the drop-down while connecting to the Collection List Wrapper. It doesn’t show the multi image settings even though its properly added. I tried with the single image and that works so something is definitely fishy

2 Likes

Hey is there any way to show the alt text from the multi images in the slide.

Hey Eli, thanks a lot! I was trying slick and swiperjs but I was not able to make them work. This looks to work perfectly when cloning the project, but for my design I need thumbnails. Do you have a version with thumbnails?

In addition, it’s not responsive. The images are placed as background so we have to set specific width and height to the slide to be displayed, so it’s not responsive, is it?

Thanks a lot!
Miguel

I think I did everything as in the tutorial. However, my pictures are not completely displayed. They are always cut off at the top and bottom. Can anyone tell me how to fix this? Many greetings and thanks, Nico

https://preview.webflow.com/preview/genussgeschichten?utm_medium=preview_link&utm_source=designer&utm_content=genussgeschichten&preview=1db396654c3f9dbd4d2147e680df51cb&pageId=637794ebb4e01a3cec23682e&itemId=639aeeb270637a104ee32938&workflow=preview

Only just come across this as I have been desperately trying to find a solution that allows me to use ‘Multi-Images’ as a Slideshow with Thumbnails for a project I am working

Is there any way we can add matching image thumbnails too this slideshow? @Eli11

I have been playing with trying to essentially merge this tutorial with the one by Sabanna here

However I am not having much success even by altering the classes in the custom code to align with what I am trying to do

This tutorial didn’t work for me :frowning: I decided to use a conditional visibility workaround

This worked great for me. Thanks for the tutorial. I’m also looking to “instance” this so that I can stack multiple sliders that are linked to unique collection items. To allow me to upload a set of images each week that will show up as a new slider at the top of the page. Anyone figure this out?


Thanks again -

Danny

Hey Danny,

If you rename

to ‘MultiImageSlider2’; MultiImageSlider3; Etc. and same for ‘MultiImageCollectionWrapper’ and change those in the script and in your collection id like you did before you can do what you want above. You just have to past the script in again.

Steps:

  1. duplicate the script in the page.
  2. Rename the two var (variables) inside the script.
  3. Change the collection ids and what collection they are pointing to.

It should look like this:

<script>
(function () {
    var sliderId = 'MultiImageSlider1';
    var collectionListWrapperId = 'MultiImageCollectionWrapper1';
    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>
<script>
(function () {
    var sliderId = 'MultiImageSlider2';
    var collectionListWrapperId = 'MultiImageCollectionWrapper2';
    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>

Eli if you are out there still. I managed to get this to work on multiple pages and it works like a charm for web. However, it’s not working on mobile no matter what configuration of fill>cover>placement settings I choose for the hierarchy even though it is playing nice on web.

Any ideas?

READ ONLY LINK

Hi everyone, I was wondering if anyone had found out a way to pull out multi images from each individual collection item. I also have issues with the slider only showing the images when clicking the first item, while the other items dont show anything at all.

All help is much appreciated!! Thank you!

Hi! Did you find a solution to this ? I am looking for the same help!

Thank you so much!

So I was able to get the tutorial to work, but now I am unsure of how to resize the slider to where the photos show completely. Anytime i change any of the sizing anywhere, it stops working. Any advice?

https://preview.webflow.com/preview/signature-healthcare-ltc-52574c?utm_medium=preview_link&utm_source=designer&utm_content=signature-healthcare-ltc-52574c&preview=836598611aff595e5bbbcae3beab3cae&pageId=64cd0e304b9d8b721d4e4ed9&itemId=64cd10a2280938fbd3d0527f&workflow=preview

I would ideally like the width of the slider to be the width of the video above

Hi @Danielle_Morgan1 Eli seems to not be active in this thread anymore, and as you seem to know your way around this script, I was wondering whether you would have a solution to mine, and what seems to be many others’ problem, and that is making this dynamic slider to work with variants. Basically the default product variant appears as the page loads, and the slider functions, but choosing a variant (say, a different color) doesn’t work (the slider with the images of default product variant just stays). I’ve noticed several people here mention this issue in one form or another. In my case it’s like this:

I have a multi-image field called ‘Images’, and I used that field as the source for the collection (Collection is bound to the multi-image field). My variants (different colors and sizes of my products don’t have that field - they only have an image field called ‘Variant Image’, and a multi-images field called ‘More Images’. So I tried binding the collection to that, but the variant fields aren’t accessible in the ‘source’ dropdown, and therefore could not be bound to the collection.

I hope my explanation is clear and makes sense. Any ideas would be greatly appreciated! Thank you!

And @Eli11 if you’re out there - thanks so much for this!