Flickity幻灯片标题和幻灯片编号

时间:2018-08-10 19:02:28

标签: jquery html css flickity

我正在实现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">&nbsp;</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 );

1 个答案:

答案 0 :(得分:1)

非常接近,您只是错误地处理了flkty对象; flkty.selectedElement的上下文不是<img>元素,而是整个幻灯片,意味着元素<div class="carousel-cell">

正因为如此,alt属性不存在,所以没有标题可供设置。您可以使它更加动态,例如在幻灯片标记中定位img,按类过滤等,但是如果您知道幻灯片内容标记结构将保持不变,则最简单的解决方案是仅抓取{{1 }}来自幻灯片中第一个子元素的值。

因此您的on select函数变为:

alt

由于flkty.on( 'select', function() { caption.textContent = flkty.selectedElement.children[0].alt; }); 返回上下文集中的HTML元素数组(例如.children的子元素),因此我们可以使用数组索引符号来获取第一个元素(例如,数组索引0) ,在您的标记中是flkty.selectedElement,然后根据需要访问其<img>

在这里工作jsFiddle:https://jsfiddle.net/b5jr2L0d/3/