[英]Cycle2 Prev/Next buttons not triggering cycles
I'm trying to implement Cycle 2's Prev and Next buttons. 我正在尝试实现Cycle 2的Prev和Next按钮。 The cycle is working - slides change every 5 secs - but I cannot get the prev and next buttons working.
这个周期在起作用-幻灯片每5秒钟更换一次-但我无法使上一个和下一个按钮正常工作。
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? 有人知道我在做什么错吗?
Give your i-tags a z-index:101
, which lays them over the slides. 给您的i标签一个
z-index:101
,它将它们放置在幻灯片上。 Otherwise they disappear under the slides. 否则它们会消失在幻灯片下。 To me it seems like a bug... I hope you get it working;-)
在我看来,这似乎是个错误……希望您能正常使用;-)
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/ Jsfiddle演示: https ://jsfiddle.net/geogeorge/o2s54ctw/4/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.