Cycle2上一個/下一個按鈕不觸發循環

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標簽一個z-index:101 ，它將它們放置在幻燈片上。 否則它們會消失在幻燈片下。 在我看來，這似乎是個錯誤……希望您能正常使用；-)

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