How to create a scrolling effect of a loop image
I am trying to work out a client side scroll scrolling solution using jQuery. The center div contains 4 images that will float to the right. As the far-right image leaves the page, it is appended to the beginning of the div and it scrolls again.
I don't explain it very well, so I made a diagram:
Any help would be greatly appreciated.
source to share
Here's a pretty simple proof that I was whipping. It's a bit shaky (a lot of guesswork with scroll numbers involved), but it should be what you're looking for and it doesn't require any plugins or additional libraries.
function scroller () {
padding = 5;
border = 1;
$(".item").first().insertAfter($(".item").last());
$(".gallery").animate({scrollLeft: $(".item").first().outerWidth() + padding + border, easing: 'swing'}, 1200, function(){
$(".gallery").scrollLeft(1);
scroller();
});
}
http://jsfiddle.net/IronFlare/L8L4e2eg/
EDIT:
I was unable to make the animation completely smooth with jQuery, so I found and modified an existing infinite scroller created entirely with CSS using the animation
and attributes keyframes
. Like my previous example in jQuery, it requires some tweaking to make it look perfectly correct, but it pays off in the end.
@-webkit-keyframes moveSlideshow {
0% { left: 0; }
100% { left: -635px; }
}
source to share
I've done this before. The easiest way to do this is to do:
var nextImage = function() {
$('#container').children().last().insertBefore(
$('#container').children().first();
)
}
Or, if you add a class for each image you can do:
var nextImage = function() {
$('img.slider:last').insertBefore($('img.slider:first'));
}
Then set the spacing:
window.sliderInterval = setInterval(function(){ nextImage(); }, 500);
source to share
Expanding on my comment above, recommending using the Slick jQuery plugin ( http://kenwheeler.github.io/slick/ ) I created a fiddle for you. http://jsfiddle.net/4ydy7ooz/
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
The code is above, so the script is linked.
source to share