Scrolling image slideshow

Question

I have a list of company logos from a client which they want displayed on the site somewhere. There are 31 logos which creates a bit of an ugly stack of images no matter how I style them. My plan then is to size the images to a uniform height and have them scroll slowly across the page one after another and to loop through to the start once the sequence is complete. I am thinking that I should create a div with the total width of all the images and duplicate it with one div next to to the other. Then, the first div will be destroyed once it has scrolled off the page and will be created again after the second div in a leap-frog effect. I was just looking for some tips on how to create this. Maybe there is a plugin somewhere already in existence?

Answer 1

There are a lot of sliders available. But I would recommend BX Slider. Make sure you resize the images before applying BXSlider.

$(document).ready(function(){
  $('.bxslider').bxSlider({
    minSlides: 4,
    maxSlides: 4,
    slideWidth: 100,
    slideMargin: 10
  });
});

.bxslider img {width: 100px; height: 100px;}

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />

<ul class="bxslider">
  <li><img src="http://lorempixel.com/400/200?1" /></li>
  <li><img src="http://lorempixel.com/200/200?1" /></li>
  <li><img src="http://lorempixel.com/400/400?1" /></li>
  <li><img src="http://lorempixel.com/200/400?1" /></li>
  <li><img src="http://lorempixel.com/400/200?2" /></li>
  <li><img src="http://lorempixel.com/200/200?2" /></li>
  <li><img src="http://lorempixel.com/400/400?2" /></li>
  <li><img src="http://lorempixel.com/200/400?2" /></li>
  <li><img src="http://lorempixel.com/400/200?3" /></li>
  <li><img src="http://lorempixel.com/200/200?3" /></li>
  <li><img src="http://lorempixel.com/400/400?3" /></li>
  <li><img src="http://lorempixel.com/200/400?3" /></li>
</ul>

Answer 2

No need to use JavaScript, a bit of Googling shows us Smashing Magazine made an article about how to do so in CSS: http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow A demo can be found at http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider