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

Question

我已经循环幻灯片画廊，我在我的图像上加了一个标题，但有一些错误，为什么我不明白..只有我的属性名称显示在我的标题上我不想属性名称我想要得到属性值我怎么了？

$(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>

Answer 1

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

Mistake 1-

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

Mistake 2-

由于 selector 是 anchor 标记 slides: "> a" 在您的 jquery 代码中，字幕将适用于 anchor 标记而不是 。所以我在 anchor 上添加了 data-cycle-title="Lorem ipsum dolor sit amet.."。还将标题模板 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>