onClick reverse function

Question

Я ищу способ, отменил функцию onClick. В основном это миниатюрная карусель с кнопками с кнопками вправо и влево, чтобы перемещать большие пальцы влево - вправо. Функция onClick для правой кнопки работает, но не слева.

Я скопировал точную функцию и изменил координаты, но это не сработало.

Вот что я до сих пор ..

$(function(){ 
 
\t 
 
\t $('.right').click(function(){ 
 
\t \t \t \t 
 
\t \t var width = $('.thumbs').width(); 
 
     var left = $('.thumbs ul').offset().left; 
 
     //alert(left); 
 
     //alert(width); 
 
\t \t 
 
\t \t $('.thumbs ul').animate({'left': -width+left } , 1000); 
 
\t \t 
 
\t }); 
 

 
\t $('.left').click(function(){ 
 
\t \t \t \t 
 
\t \t var width = $('.thumbs').width(); 
 
     var left = $('.thumbs ul').offset().left; 
 
     //alert(left); 
 
     //alert(width); 
 
\t \t 
 
\t \t $('.thumbs ul').animate({'right': width-left } , 1000); 
 
\t \t 
 
\t });  
 
    
 
\t 
 
});

•{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
body{ 
 
\t background:#eee; 
 
} 
 
.thumbs{ 
 
\t width:80%; 
 
\t overflow:hidden; 
 
    margin:0 20px; 
 
} 
 
.thumbs ul{ 
 
\t width:5000px; 
 
\t max-width:auto; 
 
\t position:relative; 
 
} 
 
.thumbs ul li{ 
 
\t display:inline; 
 
} 
 
.thumbs ul li a{ 
 
\t display:inline-block; 
 
\t float:left; 
 
    margin:0 5px; 
 
} 
 
.arrow{ 
 
\t font-size:2em; 
 
\t display:inline-block; 
 
\t padding:5px; 
 
\t background:hotpink; 
 
\t position:absolute; 
 
    cursor: pointer; 
 
    z-index: 9999; 
 
} 
 
.left{ 
 
\t top:100px; 
 
\t left:10px; 
 
} 
 
.right{ 
 
\t right:5%; 
 
\t top:100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <a class="arrow left">&larr;</a> 
 
    
 
    <div class="thumbs"> 
 

 
     <ul> 
 

 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li> 
 
     
 
     </ul> 
 
    </div> 
 
    
 
    <a class="arrow right">&rarr;</a>

Answer 1

Это все еще left стиль, который вы должны изменить, и новое положение предыдущее положение (в переменной left) плюс ширина изображения:

$('.thumbs ul').animate({'left': left + width } , 1000);