Slider in jQuery

Question

I am trying to make a image slider, the following is my code:

HTML

<div class="slider_mian_cont">
  <div class="slider_inner">
        <ul>
            <li><img src="images/one.jpg" width="940" height="350" alt=" " /></li>
            <li><img src="images/two.jpg" width="940" height="350" alt=" " /></li>
            <li><img src="images/three.jpg" width="940" height="350" alt=" " /></li>
        </ul>
    </div>
</div>
<div id="next"><a href="#">next</a></div>

jQuery

$(document).ready(function(e) {
    var len = $('.slider_mian_cont ul li').length;
    var wd = $('.slider_mian_cont ul').width();
    var mn = $('.slider_inner').width(wd*len);
    var testa = $('.slider_mian_cont ul li').width(); 
    $('#next').click(function(){  
        var leftValue = $('.slider_inner').position().left;
        //console.log('leftValue : ' + leftValue + ',  testa : ' + testa);
        var movedValue = leftValue - testa;
        //console.log('movedValue : ' + movedValue);
        $('.slider_inner').animate({ left: movedValue }, 200 )
        })
});

CSS

.slider_mian_cont{width:940px; height:350px; overflow:hidden; position:relative;}
.slider_inner{position:absolute;}
.slider_mian_cont ul{margin:0; padding:0; }
.slider_mian_cont ul li{margin:0; padding:0; float:left; width:940px; height:350px; list-style:none;}

I just want to set condition that if last <li> come tan the 'next' button stop working.

Answer 1

you can try this and this will work

$(document).ready(function(e) {
    var len = $('.slider_mian_cont ul li').length;
    var wd = $('.slider_mian_cont ul').width();
    var mn=len*wd;
    //var mn = $('.slider_inner').width(wd*len);
    var testa = $('.slider_mian_cont ul li').width(); 
    //console.log(len, wd);
    //console.log(mn);
    $('#next').click(function(){ 
        var leftValue = $('.slider_inner').position().left;
        //console.log(leftValue);
        var movedValue = leftValue - testa;
        var posv=Math.abs(leftValue)
        var mix= posv+testa+wd;
        console.log(mix , mn);
        //$(this).toggle(mn <= mix)
        if(mix == mn){ $('#next').toggle();}
        $('.slider_inner').animate({ left: movedValue }, 200 )
    });

});

Answer 2

Following will hide/show your next button depending on last reaching end

$(document).ready(function(e) {
    var len = $('.slider_mian_cont ul li').length;
    var wd = $('.slider_mian_cont ul').width();
    var mn = $('.slider_inner').width(wd * len);
    var testa = $('.slider_mian_cont ul li').width();
     /* calculate max left*/
    var maxLeft = len * testa;

    $('#next').click(function() {
        var leftValue = $('.slider_inner').position().left;

        var movedValue = leftValue - testa;
        /* hide or show "#next" depending on end or not*/ 
        $(this).toggle(movedValue >= maxLeft);    

        $('.slider_inner').animate({
            left: movedValue
        }, 200)
    })
});