Flickity 幻灯片标题和幻灯片编号
Flickity Slideshow Caption and Slide number
我正在实施 Flickity 幻灯片放映,其中包括底部的幻灯片计数器和顶部的幻灯片标题。我把它们都放在了但是顶部的标题不会显示应该是 img alt 标签的内容。
这就是我的 - JSfiddle
HTML :
<section class="ux-carousel">
<div class="carousel">
<div class="carousel-cell">
<img class="carousel-cell-image" src="https://source.unsplash.com/5i8l46zW8do" alt="Image 01" width="1170" height="685" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image" src="https://source.unsplash.com/5i8l46zW8do" alt="Image 01" width="1170" height="685" />
</div>
</div>
<div class="carousel-counter">
<p class="carousel-status"></p>
</div>
<div class="carousel-caption">
<p class="caption"> </p>
</div>
</section>
Jquery :
var flkty = new Flickity('.carousel', {
imagesLoaded: true,
percentPosition: false,
pageDots: false
});
var carouselStatus = document.querySelector('.carousel-status');
var caption = document.querySelector('.caption');
function updateStatus() {
var slideNumber = flkty.selectedIndex + 1;
carouselStatus.textContent = slideNumber + '/' + flkty.slides.length;
}
flkty.on( 'select', function() {
// set image caption using img's alt
caption.textContent = flkty.selectedElement.alt;
});
updateStatus();
flkty.on( 'select', updateStatus );
非常接近,您只是错误地处理了 flkty
object; flkty.selectedElement
的上下文不是 <img>
元素,它是整张幻灯片,表示元素 <div class="carousel-cell">
.
因此,alt
属性 不存在,因此没有任何内容可以设置标题。你可以让它更动态地说在幻灯片标记中找到 img
,按 class 过滤等,但如果你知道你的幻灯片内容标记结构将保持不变,最简单的解决方案是抓住幻灯片中第一个 child 元素的 alt
值。
因此您的 select 函数变为:
flkty.on( 'select', function() {
caption.textContent = flkty.selectedElement.children[0].alt;
});
因为.children
returns上下文集合中HTML个元素的数组(例如flkty.selectedElement
的children),我们可以使用获取第一个元素的数组索引符号(例如数组索引 0),在您的标记中是 <img>
,然后根据需要访问其 alt
。
在这里使用 jsFiddle:https://jsfiddle.net/b5jr2L0d/3/
我正在实施 Flickity 幻灯片放映,其中包括底部的幻灯片计数器和顶部的幻灯片标题。我把它们都放在了但是顶部的标题不会显示应该是 img alt 标签的内容。
这就是我的 - JSfiddle
HTML :
<section class="ux-carousel">
<div class="carousel">
<div class="carousel-cell">
<img class="carousel-cell-image" src="https://source.unsplash.com/5i8l46zW8do" alt="Image 01" width="1170" height="685" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image" src="https://source.unsplash.com/5i8l46zW8do" alt="Image 01" width="1170" height="685" />
</div>
</div>
<div class="carousel-counter">
<p class="carousel-status"></p>
</div>
<div class="carousel-caption">
<p class="caption"> </p>
</div>
</section>
Jquery :
var flkty = new Flickity('.carousel', {
imagesLoaded: true,
percentPosition: false,
pageDots: false
});
var carouselStatus = document.querySelector('.carousel-status');
var caption = document.querySelector('.caption');
function updateStatus() {
var slideNumber = flkty.selectedIndex + 1;
carouselStatus.textContent = slideNumber + '/' + flkty.slides.length;
}
flkty.on( 'select', function() {
// set image caption using img's alt
caption.textContent = flkty.selectedElement.alt;
});
updateStatus();
flkty.on( 'select', updateStatus );
非常接近,您只是错误地处理了 flkty
object; flkty.selectedElement
的上下文不是 <img>
元素,它是整张幻灯片,表示元素 <div class="carousel-cell">
.
因此,alt
属性 不存在,因此没有任何内容可以设置标题。你可以让它更动态地说在幻灯片标记中找到 img
,按 class 过滤等,但如果你知道你的幻灯片内容标记结构将保持不变,最简单的解决方案是抓住幻灯片中第一个 child 元素的 alt
值。
因此您的 select 函数变为:
flkty.on( 'select', function() {
caption.textContent = flkty.selectedElement.children[0].alt;
});
因为.children
returns上下文集合中HTML个元素的数组(例如flkty.selectedElement
的children),我们可以使用获取第一个元素的数组索引符号(例如数组索引 0),在您的标记中是 <img>
,然后根据需要访问其 alt
。
在这里使用 jsFiddle:https://jsfiddle.net/b5jr2L0d/3/