Вертикальная jcarousel с jquery

Question

Большинство примеров карусели в сети горизонтальны, поэтому я создаю свою. Я попал в ловушку, когда не знаю, как остановить прокрутку карусели, когда она достигла конца, вот мой код

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

Мне нужно создать этот код, чтобы остановить карусель, когда я достигну нижней части списка или вершины, как бы мне этого добиться?

Answer 1

Ограничить значение x от 1 до разницы между высотой контейнера div и высотой контейнера ul-li

// Определить скорость анимации для карусели

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);
    }
});

пример вертикальной карусели

Answer 2

Прежде чем анимировать контейнер для карусели, проверьте, есть ли еще элементы для анимации:

Изменение:

$('#navPrev').click(function(){
    x=x+200;
    $('#carousel ul').animate({marginTop:x}, speed);
});

Кому:

$('#navPrev').click(function(){
    //this will check if the total height of the carousel is greater than if you increment the `x` variable by another 200
    if (1 >= (x+200)) {
        x=x+200;
        $('#carousel ul').animate({marginTop:x}, speed);
    }
});