Possible ways to animate appendTo and prependTo in a horizontal list
There is a simple gallery plugin, and I'm wondering if there are ways to activate the scroll effect (left to right and vice versa) in this slide changer implementation (using append on the ul array, not the fields)?
Below is a snippet, imagine the black frame is your viewport.
function moveLeft() {
var last = $('ul li:last-child');
last.prependTo('ul');
};
function moveRight() {
var first = $('ul li:first-child');
first.appendTo('ul');
};
$('a.next').click(function (e) {
e.preventDefault();
moveRight();
});
$('a.prev').click(function (e) {
e.preventDefault();
moveLeft();
});
ul{
white-space:nowrap;
}
ul li{
display: inline-block;
margin: 15px;
}
.viewport{
position:absolute;
top: 15px;
left:100px;
width:100px;
height:50px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="viewport">
</div>
<a href="" class="prev">Previous</a>
<a href="" class="next">Next</a>
source to share
Here's a solution, it works well enough, but there are some improvements. I did ul { position: relative }
, after adding / adding an element immediately bold its position using attributes left
or right
css and then animating those values using jquery back to 0
.
Also, it is important that the previous animation queue is cleared with jquery.stop()
and that the value is left
/ right
is reset, depending on the animated attribute.
I made some adjustments to the numbers to make them look correct: if you change your current size or style, you have to adjust the exact css values again, but the principle is exactly the same. Hope this helps.
My fiddle: http://jsfiddle.net/Lmdk64a5/2/
source to share