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>
Comments
Post a Comment