Slick carousel add separate captions from img alt tag - Jquery

probablybest
August 26, 2022
259 views
0 votes
2 Answers

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 class="slidecaption">' + 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 class="carousel-module">
    <div class="container">
  
      <div class="carousel-numbers" style="display: block;">
        <span class="active">01</span> / <span class="total"></span>
      </div>

      <div class="carousel-caption">

      </div>

      <div class="carousel-gallery">
        <div class="carousel__item">
          <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 class="carousel__item">
          <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 class="carousel__item">
          <img src="http://via.placeholder.com/750x350)" alt="test3" title="testing"/>
        </div>
        <div class="carousel__item">
          <img src="http://via.placeholder.com/750x350)" alt="test4" title="testing"/>
        </div>
        <div class="carousel__item">
          <img src="http://via.placeholder.com/750x350)" alt="test5" title="testing"/>
        </div>
      </div>
    </div>
  </section>

Answers

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 class="carousel-module">
  <div class="container">
    <div class="carousel-numbers" style="display: block;">
      <span class="active">01</span> / <span class="total"></span>
    </div>
    <div class="carousel-caption">
      Hello world
    </div>

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

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 class="slidecaption">' + 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 class="carousel-module">
    <div class="container">
      <div class="carousel-numbers" style="display: block">
        <h1><span class="active">01</span> / <span class="total"></span></h1>
      </div>

      <div class="carousel-caption"></div>

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

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Slick carousel add separate captions from img alt tag – Jquery

Answers