pork-chop pork-chop - 6 months ago 12
jQuery Question

.animate() left position decrease changing all elements in container to same value

I am trying to create a really basic sliding carousel that users can navigate left or right. The script I'm using is automatically assigning an absolute left position to each item in the wrapper div and it's almost behaving as expected. However, when I click on my left or right navigation buttons, instead of decreasing/increasing the the current value for left positioning on each item, it's changing them all to the same value (which seems to be determined by the first item in the group).

I've been banging my head against the wall on this one. Any insight is greatly appreciated!

This is the sample of my button click action:

$('.leftarrow').on('click', function() {
$('.item').each(function() {
$(this).animate({ left: '-=200' }, 1000);
});
});





Edited to add snippet of all code



var $item = $('.singleItem');

var curX = 0;
var move = 0;

$item.each(function() {
$(this).css('left', curX);

curX += $(this).outerWidth(true);
move = $(this).outerWidth();
});

$leftArrow = $('.leftarrow');
$rightArrow = $('.rightarrow');

$leftArrow.on('click', function() {
$item.each(function() {
$(this).animate({
left: '-=255'
}, 1000);
});
});

$rightArrow.on('click', function() {
$item.each(function() {
$(this).animate({
left: '+=255'
}, 1000);
});

});

.scrolling_container {
height: 250px;
width: 90%;
overflow: hidden;
margin: 0 auto;
background-color: red;
}
.scrolling_container .scrolling_inner {
width: 500px;
position: relative;
}
.singleItem {
background: #dbdae0;
position: absolute;
width: 255px;
height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="scrolling_container">
<div class="rightarrow">
<h1>&raquo;</h1>
</div>
<div class="leftarrow">
<h1>&laquo;</h1>
</div>

<ul class="scrolling_inner">
<li class="singleItem">CONTENT</li>
<li class="singleItem">CONTENT</li>
<li class="singleItem">CONTENT</li>
<li class="singleItem">CONTENT</li>
<li class="singleItem">CONTENT</li>
</ul>

</div>




Answer

Seems to be working ok, I'd guess something else in your code is messing with it. Can you provide a snippet of the code surrounding that?

$('.leftarrow').on('click', function() {
  $('.item').each(function() {
    $(this).animate({ left: '-=200' }, 1000);    
  });
});
.item { position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="leftarrow">left</button>

<div class="item" style="top: 110px; left: 20px;">ITEM</div>
<div class="item" style="top: 120px; left: 200px;">ITEM</div>
<div class="item" style="top: 30px; left: 80px;">ITEM</div>
<div class="item" style="top: 40px; left: 230px;">ITEM</div>
<div class="item" style="top: 50px; left: 120px;">ITEM</div>
<div class="item" style="top: 60px; left: 0px;">ITEM</div>
<div class="item" style="top: 70px; left: 190px;">ITEM</div>
<div class="item" style="top: 80px; left: 310px;">ITEM</div>
<div class="item" style="top: 90px; left: 40px;">ITEM</div>
<div class="item" style="top: 100px; left: 60px;">ITEM</div>