滑动转盘从img alt标签添加单独的标题

我有一个光滑的旋转木马，我试图从img alt标签创建单独的标题。然而，它不起作用，我没有收到任何错误。

我想从每个的img alt标签中获得标题，然后将它们包装在一个单独的div中，然后随着您在旋转木马中浏览图像，div会发生变化

下面的标记：

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>

这里是干净的代码：

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/bootstrap@5.2.0/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>

首先，我在这里的一个片段中实现了您的旋转木马。我可以使用.slick-active类获得当前幻灯片(尽管还有其他方法(。然后我得到属性alt并更新.caption元素。

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>

相关内容

最新更新

热门标签：