CODEWITHSUNDEEP
jquery
yaqoob
yaqoob

Reputation: 1062

onClick reverse functionality

I'm looking for a way to, reverse an onClick functionality. Basically its a thumbnail carousel having tow buttons right and left to move thumbs left - right. The onClick function for right button works, but not on the left one.

I had copied the exact function and reversed the coordinates but it did not work.

Here's what i have so far ..

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

	$('.left').click(function(){
				
		var width = $('.thumbs').width();
        var left = $('.thumbs ul').offset().left;
        //alert(left);
        //alert(width);
		
		$('.thumbs ul').animate({'right': width-left } , 1000);
		
	});    
    
	
});
•{
    margin:0;
    padding:0;
}
body{
	background:#eee;
}
.thumbs{
	width:80%;
	overflow:hidden;
    margin:0 20px;
}
.thumbs ul{
	width:5000px;
	max-width:auto;
	position:relative;
}
.thumbs ul li{
	display:inline;
}
.thumbs ul li a{
	display:inline-block;
	float:left;
    margin:0 5px;
}
.arrow{
	font-size:2em;
	display:inline-block;
	padding:5px;
	background:hotpink;
	position:absolute;
    cursor: pointer;
    z-index: 9999;
}
.left{
	top:100px;
	left:10px;
}
.right{
	right:5%;
	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>

Upvotes: 0

Views: 162

Answers (1)

Guffa
Guffa

Reputation: 700910

It's still the left style that you should change, and the new position is the previous position (in the variable left) plus the width of the image:

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

Upvotes: 2

Related Questions