Question

我的所有项目都有cycle-pager-active课程，但我只是想给他们图片而不是为什么我找到了为什么我要在#single-pager中添加活动类我的第二个元素的原因我不得不问我该怎么做？

＆＃13;

$(document).ready(function(){

   $(".mySlideShow").cycle({
       pauseOnHover: true,
       pager: "#single-pager",
       pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
       slides: ".item"
    });
  
});

＆＃13;

.mySlideShow img{
  width:700px;
}
#single-pager img {
  margin:10px;
}
.cycle-pager-active{
  border:3px solid orange;
}

＆＃13;

<div class="mySlideShow">
    <div class="item">
      <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_tZuhzJnp6BDndutoN1lV.jpg" alt="">
    </div>

  <div class="item">
      <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_M6XtiCxv8AvkGako7aHr.jpg" alt="">
  </div>
  
  <div class="item">
    <img src="http://cdn.anitur.com/web/images/h494/2017-07/otel_armonia-holiday-village-spa_EOUfYFhHhV3UoxBxYTAr.jpg" alt="">
  </div>
</div>
  
<div id="single-pager">
    <div class="thumbnail-expand"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

＆＃13;

Codepen Demo

Answer 1

问题是你需要设置属性：

pager: "#single-pager .thumbnail-expand",

而不是

pager: "#single-pager",

当属性为#single-pager时，插件会将缩略图添加

到div。因此，不是3 div，而是4。所以插件从第一个div开始，而不是缩略图。

像这样：

$(document).ready(function() { $(".mySlideShow").cycle({ pauseOnHover: true, pager: "#single-pager .thumbnail-expand", pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70' />", slides: ".item" }); });

.mySlideShow img { width: 700px; } #single-pager img { margin: 10px; } /* add this -> */ img.cycle-pager-active { border: 3px solid orange; }

<div class="mySlideShow"> <div class="item"> <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_tZuhzJnp6BDndutoN1lV.jpg" alt=""> </div> <div class="item"> <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_M6XtiCxv8AvkGako7aHr.jpg" alt=""> </div> <div class="item"> <img src="http://cdn.anitur.com/web/images/h494/2017-07/otel_armonia-holiday-village-spa_EOUfYFhHhV3UoxBxYTAr.jpg" alt=""> </div> </div> <div id="single-pager"> <div class="thumbnail-expand"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

如何为Cycle2的第二张图像设置活动类？

1 个答案: