如何控制cycle2？

Question

朋友们，我想用 cycle 2 幻灯片插件做一个星期的事情，但每次都失败了让我告诉你我想做什么我正在尝试做分类 slideshow.I 有过滤器在我的 cycle2 旋转木马上（您将在示例中看到）

我有 3 个类别（或超过 3 个）

  <ul class="filter">
    <li id="sports">Sports</li>
    <li id="naturel">Naturel</li>
    <li id="animals">Animals</li>
  </ul>

我的每个li都有一个id

id#sports,id#naturel,id#animals,id#blabla..

同时我的图片有data-id属性

data-id="sports",data-id="naturel",data-id="animals",data-id="blabla.."

此时我不能做我想做的事。

如果我点击 li#sports 则只有 data-id="sports" img 必须出现在带有缩略图的幻灯片中

或者如果我点击 li#animals 则只有 data-id="animals" img 必须出现在带有缩略图的幻灯片中

我尝试 jquery 但什么也没发生

and please click to see my little project on codepen

$(document).ready(function() {

  $(".filter li").on("click", function() {
    var activeId = $(this).attr("id");

    $("img[data-id]").hide();
    $("img[data-id = '" + activeId + "']").show();
  });
});

.single-gallery{
  width:800px;
  overflow:hidden;
  position:relative;
}
.cycle-slideshow img {
  width:100%;
  height:234px;
  max-width:100%;
}

#single-pager a img {
  width: 49.3px !important;
  height:49.3px !important;
  border: 1px solid #fff;
}

#single-pager a.cycle-pager-active img {
  opacity: 0.4;
}

#single-left,
#single-right {
  position: absolute;
  top: 50%;
  z-index: 1000;
  background: rgba(255, 255, 255, .8);
  padding: 12px;
  cursor: pointer;
}

#single-left {
  left: 0;
}

#single-right {
  right: 0;
}

.filter {
  position: absolute;
  z-index: 1000;
  right: 0;
  top:0;
  padding: 0;
  color: #FFF;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 30px;
}

.filter li {
  list-style-type:none;
  cursor: pointer;
  display: inline-block;
  background: rgba(0, 0, 0, .6);
  padding: 5px;
}

<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="single-gallery">
  <div class="cycle-slideshow" data-cycle-pager="#single-pager" data-cycle-pager-template="<a href='#'><img src='{{src}}' width=48 height=48></a>" data-cycle-prev="#single-left" data-cycle-next="#single-right" data-cycle-pause-on-hover="true">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-id="sports">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" data-id="naturel">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-id="animals">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" data-id="animals" />
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-id="animals" />
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals" />
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="sports" />
  <div id="single-pager" class="center external"></div>
    
  <div id="single-next-prev">
    <span id="single-left">Prev</span>
    <span id="single-right">Next</span>
  </div>
  </div>

  <ul class="filter">
    <li id="sports">Sports</li>
    <li id="naturel">Naturel</li>
    <li id="animals">Animals</li>
  </ul>
</div>

Answer 1

即使您在要隐藏的元素上设置 display: none（使用 .hide()），插件仍将它们设置为 display: block，因为当您初始化滑块时，它们都是符合条件的幻灯片。

似乎没有一种非常简单的动态动态 removing/adding 幻灯片的方法。

我采用的方法是在要隐藏的幻灯片上设置 data-hidden="true"，然后重新初始化滑块以仅使用匹配 img[data-hidden="false"] 的图像作为幻灯片。

我将下面的代码添加到您的 css 中，这样隐藏的幻灯片就不会显示在幻灯片下方。

img[data-hidden="true"]{
  display: none;
}

我还采用了循环 div 中的所有其他 data- 属性，并将其 class 重命名为 mySlideShow 以便在需要时渲染循环$('.mySlideShow').cycle({...}) 方法。

这里应该是一个工作示例：http://codepen.io/anon/pen/dvoLeE

如何控制cycle2？

How to control cycle2?

javascript

jquery

css

jquery-cycle2