Slick carousel add separate captions from img alt tag-CodePudding

I have a slick carousel where I'm trying to create separate captions from the img alt tags. However its not working and I'm not getting any errors.

I'd like to get the caption from the img alt tag of each and then wrap them in a separate div, which then changes as you go through the images within the carousel

Markup below:

jQuery(document).ready(() => {
   var helpers = {
        addZeros: function (n) {
            return (n < 10) ? '0'   n : ''   n;
        }
    };


    $('.carousel-module').each(function (index, sliderWrap) {
        var $sliderParent = $(this).parent();
        var $slider = $(sliderWrap).find('.carousel-gallery');
        var $caption = $('.carousel-caption');

        $slider.slick({
            dots: false,
            arrows: false,
            speed: 900,
            autoplay: true,
            autoplaySpeed: 4000,
            fade: true,
            cssEase: 'linear'
        });

        if ($(this).find('.item').length > 1) {
          $(this).siblings('.carousel-numbers').show();
        }

        $(this).on('afterChange', function(event, slick, currentSlide){
          $sliderParent.find('.carousel-numbers .active').html(helpers.addZeros(currentSlide   1));

            var slideCaption = $('.carousel-gallery .slick-slide img').attr('alt');
            $(this).parent().parent().parent().append('<div >'   slideCaption   '</div>');
        });

        var sliderItemsNum = $(this).find('.slick-slide').not('.slick-cloned').length;
        $sliderParent.find('.carousel-numbers .total').html(helpers.addZeros(sliderItemsNum));
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<section >
    <div >
  
      <div  style="display: block;">
        <span >01</span> / <span ></span>
      </div>

      <div >

      </div>

      <div >
        <div >
          <img src="https://images.unsplash.com/photo-1661462328450-e0fa1bac6423?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80" alt="test1" title="testing" />
        </div>
        <div >
          <img src="https://images.unsplash.com/photo-1661459479190-fd1cdad5ffd4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="test2" title="testing"/>
        </div>
        <div >
          <img src="http://via.placeholder.com/750x350)" alt="test3" title="testing"/>
        </div>
        <div >
          <img src="http://via.placeholder.com/750x350)" alt="test4" title="testing"/>
        </div>
        <div >
          <img src="http://via.placeholder.com/750x350)" alt="test5" title="testing"/>
        </div>
      </div>
    </div>
  </section>

CodePudding user response：

For start, I made your carousel work here in a snippet. I can get the current slide using the .slick-active class (although there are other ways). Then I get the attribute alt and update the .caption element.

jQuery(document).ready(() => {
  var helpers = {
    addZeros: function(n) {
      return (n < 10) ? '0'   n : ''   n;
    }
  };


  $('.carousel-module').each(function(index, sliderWrap) {
    var $sliderParent = $(this).parent();
    var $slider = $(sliderWrap).find('.carousel-gallery');
    var $caption = $('.carousel-caption');

    $slider.slick({
      speed: 900,
      autoplay: true,
      autoplaySpeed: 4000,
      fade: false,
      cssEase: 'linear'
    });

    if ($(this).find('.item').length > 1) {
      $(this).siblings('.carousel-numbers').show();
    }


    $(this).on('afterChange', function(event, slick, currentSlide) {
      $sliderParent.find('.carousel-numbers .active').html(helpers.addZeros(currentSlide   1));
      var slideCaption = $('.carousel-gallery .slick-slide.slick-active img').attr('alt');
      $(this).closest(".carousel-module").find('.carousel-caption').text(slideCaption);
    });

    var sliderItemsNum = $(this).find('.slick-slide').not('.slick-cloned').length;
    $sliderParent.find('.carousel-numbers .total').html(helpers.addZeros(sliderItemsNum));


  });
});

.carousel-module {
  width: 200px;
  margin: 20px;
}

img {
  width: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd r5/ 6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<section >
  <div >
    <div  style="display: block;">
      <span >01</span> / <span ></span>
    </div>
    <div >
      Hello world
    </div>

    <div >
      <div >
        <img src="https://picsum.photos/180" alt="test1" title="testing" />
      </div>
      <div >
        <img src="https://picsum.photos/180" alt="test2" title="testing" />
      </div>
      <div >
        <img src="https://picsum.photos/180" alt="test3" title="testing" />
      </div>
      <div >
        <img src="https://picsum.photos/180" alt="test4" title="testing" />
      </div>
      <div >
        <img src="https://picsum.photos/180" alt="test5" title="testing" />
      </div>
    </div>
  </div>
</section>

CodePudding user response：

Here is clean code:

jQuery(document).ready(() => {
  const addZeroPad = (val) => val.toString().padStart(2, "0");

  $(".carousel-module").each(function() {
    const $module = $(this);
    const $slider = $module.find(".carousel-gallery");
    const $caption = $module.find(".carousel-caption");
    const $slides = $slider.find(".carousel__item");
    const $numbersElem = $module.find(".carousel-numbers");
    const $totalNumElem = $module.find(".carousel-numbers .total");
    const $activeNumElem = $module.find(".carousel-numbers .active");

    const changeCaption = (value) =>
      $caption.html('<h4 >'   value   "</div>");

    if ($slides.length) {
      $slider.on("init", function(event, slick) {
        console.log(slick.$slides.length);
        $totalNumElem.text(addZeroPad(slick.$slides.length));
        $numbersElem.show();
        const slideCaption = $(slick.$slides.get(0)).find("img").attr("alt");
        changeCaption(slideCaption);
      });

      $slider.on("afterChange", function(event, slick, currentSlide) {
        $activeNumElem.text(addZeroPad(currentSlide   1));
        const slideCaption = $(slick.$slides.get(currentSlide))
          .find("img")
          .attr("alt");
        changeCaption(slideCaption);
      });

      $slider.slick({
        dots: true,
        arrows: true,
        autoplay: true,
      });
    }
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700&display=swap" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-grid.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  <script src="demo.js"></script>
  <style>
    body {
      font-family: 'Jost', sans-serif;
    }
    
    .carousel-module img {
      width: 100%;
    }
  </style>
</head>

<body>
  <section >
    <div >
      <div  style="display: block">
        <h1><span >01</span> / <span ></span></h1>
      </div>

      <div ></div>

      <div >
        <div >
          <img src="https://picsum.photos/id/1013/750/300" alt="test1" title="testing" />
        </div>
        <div >
          <img src="https://picsum.photos/id/1023/750/300" alt="test2" title="testing" />
        </div>
        <div >
          <img src="https://picsum.photos/id/1022/750/300" alt="test3" title="testing" />
        </div>
        <div >
          <img src="https://picsum.photos/id/1056/750/300" alt="test4" title="testing" />
        </div>
        <div >
          <img src="https://picsum.photos/id/1026/750/300" alt="test5" title="testing" />
        </div>
      </div>
    </div>
  </section>
</body>

</html>