需要用jquery改变滑块

Question

我有一个简单的滑块，我想在默认图像的左侧和右侧显示图像，并使用按钮左右滚动。

当前设置：CodePen example

下面是我的滑动图像的代码，但只有当它们从右向左滑动时才能正常工作，如何在从左向右滑动并在滑动之前看到左边的图像时使其工作？

$(document).ready(function() {

$("#btnRight").click(function(){
$('#carousel ul').animate({marginLeft:'-=810px'}, 1000, function(){

    $(this).find("li:last").after($(this).find("li:first"));
    $(this).css({marginLeft:0});
});
});
});

$(document).ready(function() {

$("#btnLeft").click(function(){
$('#carousel ul').animate({marginLeft:'+=810px'}, 1000, function(){

    $(this).find("li:last").after($(this).find("li:first"));
    $(this).css({marginLeft:0});
});
});
});

Answer 1

试试这个

$(document).ready(function() {
  $("#btnRight").click(function(){
    $('#carousel ul').animate({marginLeft:'-=810px'}, 1000, function(){
        $(this).find("li:last").after($(this).find("li:first"));
        $(this).css({marginLeft:0});
    });
  });
  $("#btnLeft").click(function(){
    $('#carousel ul li:first').before($("#carousel ul").find("li:last"));
    $('#carousel ul').css({"margin-left":"-810px"});
    $('#carousel ul').animate({marginLeft:'+=810px'}, 1000, function(){
        $(this).css({marginLeft:0});
    });
  });
});