javascript - 循环图像标题不起作用

我已经循环播放幻灯片库，并在图像上添加了标题，但为什么我不明白，这是有问题的。.只有属性名称显示在标题上，我不想使用属性名称，我想获取属性值是什么我错了吗？

$(document).ready(function() {

  $('.mySlideShow').cycle({
    log: false,
    fx: 'fade',
    slides: ">a",
    caption: '.cycle-caption',
    captionTemplate: "{{data-caption}}",
    pauseOnHover: true,
  });
})

.slide-gallery {
  position: relative;
  width: 790px;
  overflow: hidden;
  height: 500px;
}

.slide-gallery img {
  max-width: 100%;
  height: 100%;
}

.cycle-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
  padding: 10px;
  color: #FFF;
  z-index: 1000;
  width: 100%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

<div class="slide-gallery">
  <div class="mySlideShow">

    <a>
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-caption="Lorem ipsum dolor sit amet..">
    </a>
    <a>
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-caption="This is my caption....">
    </a>
    <a>
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-caption="bla.....">
    </a>
  </div>

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

最佳答案

定义标题的方式中几乎没有错误。


  错误1


首先，不支持data-caption属性来显示caption。尽管有数据标题，但阅读完文档后，您可以使用data-cycle-title作为标题。


  错误2


由于选择器是jquery代码中的锚标记幻灯片：“> a”，因此字幕将在锚标记上起作用，而不在上起作用。因此，我在锚点上添加了data-cycle-title =“ Lorem ipsum dolor sit amet ..”。
还将captiontemplate jquery更改为此：

captionTemplate: "' {{cycleTitle}}'",

下面是工作示例。快乐编码:)

$(document).ready(function() {

  $('.mySlideShow').cycle({
    log: false,
    fx: 'fade',
    slides: "> a",
    caption: '.cycle-caption',
    captionTemplate: "' {{cycleTitle}}'",
    pauseOnHover: true,
  });
})

.slide-gallery {
  position: relative;
  width: 790px;
  overflow: hidden;
  height: 500px;
}

.slide-gallery img {
  max-width: 100%;
  height: 100%;
}

.cycle-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
  padding: 10px;
  color: #FFF;
  z-index: 1000;
  width: 100%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

<div class="slide-gallery">
  <div class="mySlideShow">

    <a data-cycle-title="Lorem ipsum dolor sit amet..">
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" >
    </a>
    <a data-cycle-title="This is my caption....">
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" >
    </a>
    <a data-cycle-title="bla.....">
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" >
    </a>
  </div>

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