我的网站上有一个非常简单的幻灯片,我使用了一个很棒的幻灯片插件 - cycle plugin。我的问题是箭头(下一个,上一个)。我想活跃只有箭头,然后是另一张幻灯片。
如果我有三张幻灯片。当第一张幻灯片显示下一个活动按钮时。当您查看第二个显示为活动next和prev时。当您查看第三张幻灯片时,仅显示为活动的上一页。
示例:
实例:
Live demo on my website
Testing example on jsfiddle
jQuery:
$('.slideshow > ul')
.before('<div class="wrapper"><div class="content"><div class="slide-nav">')
.cycle({
fx: 'scrollLeft',
speed: '600',
timeout: 4000,
pager: '.slide-nav',
next: '#next',
prev: '#prev'
});
HTML:
<div id="slideshow">
<div class="slideshow">
<div class="wrapper">
<div class="content">
<div class="slide-ntx-prv">
<a id="prev" href=""><span class="fa fa-chevron-left"></span></a>
<a id="next" href=""><span class="fa fa-chevron-right"></span></a>
</div>
</div><!-- /.content -->
</div><!-- /.wrapper -->
<ul>
<li class="slide1">
<div class="wrapper">
<div class="content">
<div>cena/noc od <span class="green-bold">67 EUR</span></div>
<h2>Vysoké tatry<span>876 apartmánů</span></h2>
</div><!-- /.content -->
</div><!-- /.wrapper -->
</li>
<li class="slide2">
<div class="wrapper">
<div class="content">
<div>cena/noc od <span class="green-bold">68 EUR</span></div>
<h2>Střední tatry<span>50 apartmánů</span></h2>
</div><!-- /.content -->
</div><!-- /.wrapper -->
</li>
<li class="slide3">
<div class="wrapper">
<div class="content">
<div>cena/noc od <span class="green-bold">69 EUR</span></div>
<h2>Nízké tatry<span>236 apartmánů</span></h2>
</div><!-- /.content -->
</div><!-- /.wrapper -->
</li>
</ul>
</div><!-- /.slideshow -->
</div><!-- /#slideshow -->
答案 0 :(得分:2)
如果您有权访问幻灯片数组,并且您知道哪个是当前幻灯片,则可以显示/隐藏幻灯片导航的部分内容。
这是一个基于你的jsfiddle工作。
jQuery的:
$('.slideshow > ul')
.before('<div class="wrapper"><div class="content"><div class="slide-nav">')
.cycle({
fx: 'scrollLeft',
speed: '600',
timeout: 4000,
pager: '.slide-nav',
next: '#next',
prev: '#prev',
nowrap: true,
onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement) {
if(zeroBasedSlideIndex == 0) {
$('#prev').hide();
} else {
$('#prev').show();
}
if(zeroBasedSlideIndex == ($('#slideshow ul li').length - 1) ) {
$('#next').hide();
} else {
$('#next').show();
}
}
});
Nowrap可防止幻灯片循环播放。 onPrevNextEvent是主要部分。