[RESOLVED]Anyone recommend a smooth, fast moving CSS image carousel?

Hi

Can anyone recommend a smooth, fast moving (CSS only?) image carousel so I can replace the 6 light-grey emblem strip every 4 seconds at the bottom of
www.orbisoft.com?

(It’s just one png 935×90 but I want to add a few more.)

TIA

Mark

So every four seconds you want to replace the existing image within that area with another image?

There are obviously tons of different options out there, although you are likely going to be limited with regards to CSS only approaches (the most common would rely on Javascript or jQuery) :

If you don’t want to use Javascript / jQuery, there are other options that rely strictly on CSS and HTML as well (some use Javascript for cross-browser compatability): 

Barebones Pure Javascript Implementation

It should be noted that you could easily build your own very simple one using a bit of Javascript as follows :

<!-- Your "Slider" -->
<img id='slider' style='height: 90px; width: 935px' />
<script type='text/javascript'>
    // Indicate the current image you are on
    var currentImage = 0;
    
    // An array of your images
    var images = [];
    
    // Set the path for each of your images here (examples with that same size)
    images.push('...');
    images.push('...');
    images.push('...');
    images.push('...');

    // Initialize your first image
    UpdateImage(0);
    
    // Set a timer to update your image every 4 seconds
    setInterval(function(){ UpdateImage(currentImage);}, 4000);
    
    // A function to update your image
    function UpdateImage(index){
        // Set the image to the current image
        document.getElementById('slider').src = images[index];
      
        // Increment the current image (and handle resetting to 0)
        currentImage = (currentImage != images.length - 1) ? currentImage + 1 : 0;
    }
</script>

You can see a working example of this here, albeit it is the most basic of implementations for something like this.

Example Implementation "Basic jQuery Slider"

A very simple implementation using a plug-in might be like the following one based on the
Basic jQuery Slider :

<!-- Stylesheet for this plug-in -->
<link rel="stylesheet" href="http://www.basic-slider.com/css/main.css">
<!-- jQuery Reference -->
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Slider Script -->
<script src="http://www.basic-slider.com/js/bjqs-1.3.min.js"></script>
<!-- Slider configuration -->
<script type='text/javascript'>
      $(function(){
         // When your page loads, set up the slider
         $('#my-slideshow').bjqs({
           'height' : 90,
           'width' : 935,
           'showcontrols': false,
           'showmarkers': false,
           'responsive' : true
         });
      });
</script>
  
</head>
<body>
  <!-- Your Slideshow -->
  <div id="my-slideshow">
    <!-- Place each image within this list -->
    <ul class="bjqs">
        <li><img src='...' style='height: 90px; width: 935px' /></li>
        <li><img src='...' style='height: 90px; width: 935px' /></li>
       <li><img src='...' style='height: 90px; width: 935px' /></li>
       <li><img src='...' style='height: 90px; width: 935px' /></li>
    </ul>
  </div>
</body>

You can see a working example of this here, which is probably more what you are looking for. (The transitions can be configured as well).

Excellent response IMO. Thank you.

Leave a Reply