Question

Most of the carousel examples on the web are horizontal, so I am creating mine. I have hit a snag where I don’t know how to stop the carousel from scrolling down when it has reached the end. Here is my code:

 <script type="text/javascript">
        $(document).ready(function(){
            //Define the animation speed for the Carousel
            var speed = 600;
            var x =1;
            var number = $('li').size();
            var height = $('li').height();
            var total_height = number * height;

            $('#navPrev').click(function(){

               
                x=x+200;
                $('#carousel ul').animate({marginTop:x}, speed);
            });
            $('#navNext').click(function(){
                
                x= x -200;
                
              
                $('#carousel ul').animate({marginTop:x}, speed);
            });
        });
    </script> 
    <style type="text/css">
        #container {height:500px; width:400px; font-family:Tahoma;}
        #carousel { height:500px; width:400px; border:1px solid #000;
                    overflow:hidden;}
        #carousel ul { list-style-type:none;margin-top:4px; width:300px; margin-left:0; left:0; padding-left:1px;}
        #carousel li { display:inline;}
        #carousel ul li img{ width:400px; height:90px; border:1px solid #ccc;
                             float:left; }
        #navPrev {float:left;}
        #navNext {float:right;}
    </style>
  <div id="container">
        <div id="carousel">

            <ul>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li><li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/cupcake.jpg" width="800px" /></li>
                <li><img src="images/loading.gif" width="800px" /></li>

            </ul>
        </div>
        <a id="navPrev" href="#">Previous</a>
        <a id="navNext" href="#">Next</a>
    </div>

I need to make this code to make the carousel stop when I have reached the bottom of the list or the top. How would I achieve this?

Answer 1

Limit the x value from 1 to the difference between div container height and the ul-li container height

//Define the animation speed for the Carousel

var speed = 600;
var x = 1;
var number = $('li').size();
var height = $('img').height();
var total_height = number * height;
var diff = $('#carousel').height() - $('#carousel ul').height();
$('#navPrev').click(function() {

    if (x < 1) {
        x = x + 200;
        $('#carousel ul').animate({
            marginTop: x
        }, speed);
    }
});
$('#navNext').click(function() {
    if (x > diff) {
        x = x - 200;
        $('#carousel ul').animate({
            marginTop: x
        }, speed);
    }
});

vertical carousel example