Cycle2 Prev/Next 按钮不触发循环答案

【问题标题】：Cycle2 Prev/Next buttons not triggering cyclesCycle2 Prev/Next 按钮不触发循环
【发布时间】：2017-03-09 16:26:44
【问题描述】：

我正在尝试实现 Cycle 2 的 Prev 和 Next 按钮。循环正常 - 幻灯片每 5 秒更换一次 - 但我无法让上一个和下一个按钮正常工作。

我的代码是：

<i class="fa fa-chevron-left" id="prev" ></i>
<i class="fa fa-chevron-right" id="next" ></i>

<div id="sliderholder" class="cycle-slideshow" 
    data-cycle-fx="fade" 
    data-cycle-timeout="5000"
    data-cycle-prev="#prev"
    data-cycle-next="#next"
    data-cycle-slides="> div">

      <div class="slide"></div>
      <div class="slide"></div>
      <div class="slide"></div>
</div>

有人知道我做错了什么吗？

【问题讨论】：

标签： jquery jquery-cycle2 cycle2

【解决方案1】：

给你的 i-tags 一个z-index:101，它会将它们放在幻灯片上。否则它们会消失在幻灯片下。对我来说，这似乎是一个错误......我希望你让它工作;-)

【讨论】：

【解决方案2】：

试试这个

.carousel-main{
  position:relative;
  width:250px;
  height:250px;
}
#sliderholder{
  z-index:-1;
}
.slide {
  width: 250px;
  height: 250px;
  background:#000;
}
.slide1{
  background:green;
}
.slide2{
  background:blue;
}
.slide3{
  background:pink;
}
i{
  background:#fff;
  display: block;
    float: left;
    height: 20px;
    width: auto;
    z-index: 1;
    position:absolute;
    top:calc( 50% - 10px );
    cursor:pointer;
}
#prev{
  left:0;
}
#next{
  right:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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="carousel-main">


<i class="fa fa-chevron-left" id="prev" > prev </i>
<i class="fa fa-chevron-right" id="next" > next</i>

<div id="sliderholder" class="cycle-slideshow" 
    data-cycle-fx="fade" 
    data-cycle-timeout="5000"
    data-cycle-prev="#prev"
    data-cycle-next="#next"
    data-cycle-slides="> div">

      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
</div>

</div>

Jsfiddle 演示：https://jsfiddle.net/geogeorge/o2s54ctw/4/

【讨论】：