I would like to create a client's logo wall like this : https://www.squarespace.com/ scroll down until "TRUSTED BY THE WORLD’S BEST" section.
To create the same effect, I begin to generate a list of 8 elements and after I put random src image from an array inside my list : https://jsfiddle.net/Xroad/avn64tw0/6/
After that, I tried to change randomly ONLY ONE image after the other : https://jsfiddle.net/Xroad/avn64tw0/8/
I don't know how to change only one random image ? And after add the little move effect to from the bottom to the top.
HTML
<div class="list-items"></div>
CSS
.list-items {
max-width: 500px;
}
.item {
display: inline-block;
float: left;
margin: 10px;
height: 100px;
width: 100px;
line-height: 100px;
background-repeat: no-repeat;
background-size: cover;
img {
display: inline-block;
width: 100%;
height: auto;
max-height: 100%;
vertical-align: middle;
}
}
JQUERY
// List of images //
var logos = ["http://wallpaper-gallery.net/images/image/image-1.jpg", "http://wallpaper-gallery.net/images/image/image-2.jpg", "http://wallpaper-gallery.net/images/image/image-3.jpg", "http://wallpaper-gallery.net/images/image/image-4.jpg", "http://wallpaper-gallery.net/images/image/image-5.jpg", "http://wallpaper-gallery.net/images/image/image-6.jpg", "http://wallpaper-gallery.net/images/image/image-7.jpg", "http://wallpaper-gallery.net/images/image/image-8.jpg"];
// Generate 8 items //
var i;
for (i = 0; i < 8; ++i) {
$(".list-items").append('<a href="" class="item"><img src="" alt=""></a>');
}
// Shuffle function //
function shuffle(o) {
for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
logos = shuffle(logos);
// Push src in image tags //
$('.item img').each(function(i) {
$(this).attr('src', logos[i]);
});
// Change one image after the other //
count = 0;
setInterval(function () {
count++;
$(".item img").fadeOut(600, function () {
$(this).attr('src', logos[count % logos.length]).fadeIn(600);
});
}, 5000);
The "Change image" part don't work like I would like, it change all the image while I would like one image after the other.
UPDATE
With help of @ChrisG I got an image who change randomly, but sometimes I got duplicate image.
https://jsfiddle.net/Xroad/avn64tw0/11/