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

Question

I have a very simple slideshow on my website, I use a great plugin for slideshow - cycle plugin. My problem is with the arrows (next, prev). I would like to be active only arrow followed by another slide.

If I have a three slides. When the first slide shows the active button next active. When you view the second appears as active next and prev. When you view the third slide appears as only active prev.

Example:

3 slides:
- first slide - only button next show
- second slide - button prev and next show
- third slide - only button prev show

Live examples:

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

localghost localghost · Accepted Answer · 2015-01-10T12:01:51

if you have access to the slides array and you know which is the current slide you can show/hide parts of the slide navigation.

Here is one working jsfiddle based on yours.

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 prevents the slides from looping. onPrevNextEvent is the main part.

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

1 Answers