Cycle2 Prev/Next buttons not triggering cycles

Question

I'm trying to implement Cycle 2's Prev and Next buttons. The cycle is working - slides change every 5 secs - but I cannot get the prev and next buttons working.

My code is:

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

Would anyone know what I'm doing wrong?

Answer 1

Give your i-tags a z-index:101 , which lays them over the slides. Otherwise they disappear under the slides. To me it seems like a bug... I hope you get it working;-)

Answer 2

Try this

 .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 Demo : https://jsfiddle.net/geogeorge/o2s54ctw/4/