Is the creator of this great script still alive?
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.
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 
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
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 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:
- duplicate the script in the page.
- Rename the two var (variables) inside the script.
- 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?
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?
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!