javascript - 如何更改缩略图 src cycle2

Question

我有循环 2 幻灯片，我想从 anchor 的不同 src 获取缩略图。.cycle2 从 data-src 获取缩略图，但我希望它从data-thumbnail 怎么做？

$(document).ready(function(){
  $('.mySlideShow').cycle({
            next: "#single-right",
            log: false,
            fx: 'fade',
            slides: ">a",
            caption: '.cycle-caption',
            captionTemplate: "{{target}}",
            pauseOnHover: true,
            pager: "#single-pager",
            pagerTemplate: "<img src='{{src}}' width=48 height=48>",
            prev: "#single-left",
        });
});

.mySlideShow{
  width:700px;
}
.mySlideShow img{
  width:100%;
}
#single-pager img{
  margin:3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.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="mySlideShow">
  <a href="#"  data-src="http://malsup.github.io/images/p1.jpg" data-thumbnail="https://cdn01.boxcdn.net/cdn/farfuture/QHbxX4l5tB7lGqFOmr8mpfgCToQjdC3CgzylCT7brfQ/md5:307b50be8e0f182984d0c28bb81c20b8/sites/default/files/thumbnail-sample.png" target="caption 1">
    <img src="http://malsup.github.io/images/p1.jpg">
  </a>
  <a href="#"  data-src="http://malsup.github.io/images/p2.jpg" data-thumbnail="http://authentic-scandinavia.com/system/images/tours/photos/94/thumbnail.jpg?1342783189">
    <img src="http://malsup.github.io/images/p2.jpg" target="">
  </a>
</div>
 <div id="cycle-caption" class="cycle-caption">
                                    <p></p>
                                </div>
<div id="single-pager" class="center external">

</div>

Answer 1

改变这个:

pagerTemplate: "<img src='{{src}}' width=48 height=48>",

用这个:

pagerTemplate: "<img src='{{thumbnail}}' width=48 height=48>",

数据会自动识别

$(document).ready(function(){
  $('.mySlideShow').cycle({
            next: "#single-right",
            log: false,
            fx: 'fade',
            slides: ">a",
            caption: '.cycle-caption',
            captionTemplate: "{{target}}",
            pauseOnHover: true,
            pager: "#single-pager",
            pagerTemplate: "<img src='{{thumbnail}}' width=48 height=48>",
            prev: "#single-left",
        });
});

.mySlideShow{
  width:700px;
}
.mySlideShow img{
  width:100%;
}
#single-pager img{
  margin:3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.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="mySlideShow">
  <a href="#"  data-src="http://malsup.github.io/images/p1.jpg" data-thumbnail="https://cdn01.boxcdn.net/cdn/farfuture/QHbxX4l5tB7lGqFOmr8mpfgCToQjdC3CgzylCT7brfQ/md5:307b50be8e0f182984d0c28bb81c20b8/sites/default/files/thumbnail-sample.png" target="caption 1">
    <img src="http://malsup.github.io/images/p1.jpg">
  </a>
  <a href="#"  data-src="http://malsup.github.io/images/p2.jpg" data-thumbnail="http://authentic-scandinavia.com/system/images/tours/photos/94/thumbnail.jpg?1342783189">
    <img src="http://malsup.github.io/images/p2.jpg" target="">
  </a>
</div>
 <div id="cycle-caption" class="cycle-caption">
                                    <p></p>
                                </div>
<div id="single-pager" class="center external">

</div>