Простой слайдер с использованием jquery

Question

Я хочу реализовать простой слайдер.

JSFiddle

Проблема заключается в том, что если будет больше двух слайдов, чем это будет прекрасно работает. Но если есть два слайда, это вызывает проблему.

Если есть две слайды, и мы нажимаем на предыдущую стрелку, тогда она будет работать нормально, но когда мы нажимаем на следующую стрелку, изображение будет появляться после некоторого времени, которое не выглядит хорошо.

Я хочу реализовать ту же самую вещь, щелкнув следующую стрелку, поскольку она работает с предыдущей стрелкой.

HTML:

<div id="slider"> 
    <a href="#" class="control_next">></a> 
    <a href="#" class="control_prev"><</a> 
    <ul> 
    <li>SLIDE 1</li> 
    <li style="background: #aaa;">SLIDE 2</li> 
    </ul> 
</div> 

CSS:

#slider { 
    position: relative; 
    overflow: hidden; 
    margin: 20px auto 0 auto; 
    border-radius: 4px; 
} 

#slider ul { 
    position: relative; 
    margin: 0; 
    padding: 0; 
    height: 200px; 
    list-style: none; 
} 

#slider ul li { 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 500px; 
    height: 300px; 
    background: #ccc; 
    text-align: center; 
    line-height: 300px; 
} 

a.control_prev, a.control_next { 
    position: absolute; 
    top: 40%; 
    z-index: 999; 
    display: block; 
    padding: 4% 3%; 
    width: auto; 
    height: auto; 
    background: #2a2a2a; 
    color: #fff; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 18px; 
    opacity: 0.8; 
    cursor: pointer; 
} 

a.control_prev:hover, a.control_next:hover { 
    opacity: 1; 
    -webkit-transition: all 0.2s ease; 
} 

a.control_prev { 
    border-radius: 0 2px 2px 0; 
} 

a.control_next { 
    right:0; 
    border-radius: 2px 0 0 2px; 
} 

JS:

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

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

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 200, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
     }, 200, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    $('a.control_prev').click(function() { 
     moveLeft(); 
    }); 

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

}); 

Пожалуйста, помогите мне. Спасибо заранее

Answer 1

Demo

Изменить moveRight функцию

function moveRight() { 
    $('#slider ul').animate({ 
     right: - slideWidth 
    }, 200, function() { 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('right', ''); 
    }); 
}; 

Answer 2

Разница вы получаете здесь:

function moveLeft() { 
    $('#slider ul').animate({ 
     left: slideWidth 
    }, 200, function() { 
     $('#slider ul li:last-child').prependTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 
}; 

function moveRight() { 
    $('#slider ul').animate({ 
     left: slideWidth 
    }, 200, function() { 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 
}; 

Вы можете удалить те '+' и '-' в "левом" Op Тион. Это делает разницу

Answer 3

Я не понимаю, почему код работает так, но если вы думаете о вводе более двух слайдов, добавив еще один слайд, кажется, каким-то образом сделать трюк: http://jsfiddle.net/ek9bs/

HTML:

<div id="slider"> 
<a href="#" class="control_next">></a> 
<a href="#" class="control_prev"><</a> 
<ul> 
<li>SLIDE 1</li> 
<li style="background: #aaa;">SLIDE 2</li> 
    <li style="background: #ggg;">SLIDE 3</li> 

</ul> 
</div> 

Это, конечно, если два слайда, которые вы предоставили, являются примерами, и вы хотите добавить больше в целом.