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.
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 
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! 
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