如何通过幻灯片查看活动箭头（下一个/上一个）？

Question

我的网站上有一个非常简单的幻灯片，我使用了一个很棒的幻灯片插件 - cycle plugin。我的问题是箭头（下一个，上一个）。我只想激活箭头后跟另一张幻灯片。

如果我有三张幻灯片。当第一张幻灯片显示下一个活动按钮时。当您查看第二个时，下一个和上一个显示为活动状态。当您查看第三张幻灯片时，显示为仅活动上一张。

示例：

3 张幻灯片：
- 第一张幻灯片 - 只有按钮 下一张 显示
- 第二张幻灯片 - 按钮 prev 和 next show
- 第三张幻灯片 - 只有按钮 上一页 显示

实例：

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

Answer 1

如果您有权访问幻灯片数组并且知道当前的幻灯片是哪张，则可以 show/hide 部分幻灯片导航。

这是一个基于你的工作 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是主要部分。

如何通过幻灯片查看活动箭头（下一个/上一个）？

How to view active arrow (next / previous) by slides?

javascript

jquery

html

css

jquery-cycle