CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
Andyjm
Andyjm

Reputation: 335

jQuery - Show/Hide prev/next buttons in slider

I'm trying to control navigation in a very basic slider (patched together from simple examples online).

My aim is to hide the 'Next' button when reaching the last last slide, and conversely hide the 'Prev' button at the first slide, can this be done by catching the a li 'active' (current slide shown) class and then hiding it?

My relevant code is below:

jQuery(document).ready(function ($) {

//set vars for slider size
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');
//move left function (prev)
function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 700, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};
//move right function (next)
function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 700, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};
// call functions on click 
$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    if ($(this).hasClass('final')){
    $('a.control_next').hide();
    }
    else{
        moveRight();
    }
});

});

And the HTML slider list:

<div id="slider">
 <a href="#" class="control_next">></a>
 <a href="#" class="control_prev"><</a>
   <ul>
     <li><img src="sme1.png" height="550"/></li>
     <li><img src="sme2.png" height="550"/></li>
     <li><img src="sme3.png" height="550"/></li>
     <li class="final"><img src="sme4.png" height="550"/></li>
   </ul>  
</div>

I can think of different ways of approaching it but this is the solution I've settled on trying to work out, any help appreciated!!

jsfiddle: http://jsfiddle.net/o31ksujt/3/

Upvotes: 0

Views: 1764

Answers (1)

Marino
Marino

Reputation: 56

You can add the control at the end of the animation.

In your code is also present an error, in your click function you verify $(this).hasClass('final'), but is relative about tag a, you have to specificate $('#slider ul li:first-child').

A solution can be the follow.

  1. Create new function

    function verifyControlButton(){ if( $('#slider ul li:first-child').hasClass("final")){ $('a.control_next').hide(); }else{ $('a.control_next').show(); } };

  2. Set call to the new method in your move action:

    //move left function (prev) function moveLeft() { $('#slider ul').animate({ left: + slideWidth }, 700, function () { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); verifyControlButton(); }); }; //move right function (next) function moveRight() { $('#slider ul').animate({ left: - slideWidth }, 700, function () { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); verifyControlButton(); }); };

  3. click on control call simple the methods.

    // call functions on click $('a.control_prev').click(function () { moveLeft(); });

    $('a.control_next').click(function () { moveRight(); });

http://codepen.io/anon/pen/gbaoxK

Upvotes: 0

Related Questions