Galleries

Slider Gallery
The slider utilises multi image in the CMS to allow you to pull through the ALT text as captions. the following structure is applied.
Webflow Slider Structure
content_copy
Copy
<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 carouselText = $(".carousel-text");
 var $slider = $("#" + sliderId);
 var $slides = $slider.find("." + slideClass);
 var $collectionWrapper = $("#" + collectionListWrapperId);
 var $images = $collectionWrapper.find("." + collectionItemClass);
 if ($slider && $collectionWrapper) {
   leftArrow = $slider.find("." + leftArrowClass);
   rightArrow = $slider.find("." + rightArrowClass);    // Store reference to current slide
   var currentSlide = 0;    // Set initial text of current slide
   carouselText
     .eq(currentSlide)
     .text($images.eq(currentSlide).children().first().attr("alt"));    // Handle previous slide cycle
   leftArrow.click(function () {
     currentSlide--;      if (currentSlide < 0) currentSlide = $images.length - 1;      console.log(carouselText);      carouselText
       .eq(currentSlide)
       .text($images.eq(currentSlide).children().first().attr("alt"));
   });    // Handle next slide cycle
   rightArrow.click(function () {
     currentSlide++;      if (currentSlide > $images.length - 1) currentSlide = 0;      carouselText
       .eq(currentSlide)
       .text($images.eq(currentSlide).children().first().attr("alt"));
   });    $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.hide();
 }
})();
</script>