Question

我正在尝试实现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>

有人知道我做错了吗？

Answer 1

将您的i-tag设为z-index:101，将其放在幻灯片上。否则它们会在幻灯片下消失。对我而言，这似乎是一个错误......我希望你能让它发挥作用; - ）

Answer 2

试试这个

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Cycle2 Prev / Next按钮不触发循环

2 个答案: