How to create marquee infinite loop of logos slider with css only


Tags: html,css

Problem :

Right now my code makes the logos animate from right to left and once it hits the end, it restarts. How can I make it continue in a loop so that the first logo follows the last one when a new cycle starts?

EDIT: I rather not use extra js libraries, so if there is a simple way of doing this with jquery that would be much better

img {
  width: 100px;
}
.marquee {
  position: relative;
  width: 100%;
  height: 100px;
  border: 1px solid black;
  overflow: hidden;
}
.marquee div {
  display: block;
  position: absolute;
  width: 300%;
  overflow: hidden;
  animation: marquee 20s linear infinite;
}
.marquee div:hover {
  animation-play-state: paused;
}
.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}
<div class="marquee">
  <div>
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
  </div>
</div>



Solution :

HTML:

  <div class='marquee'>
       .... 
       images
       ....
    </div>

CSS:

.marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
}

JavaScript:

$(function () {
    $('.marquee').marquee({
        duration: 5000,
         duplicated: true,
         gap: 00, 
         direction: 'left',
         pauseOnHover: true
    });
});

This is what i have done to make it run using JQuery Marquee.

External links:

  1. jquery.pause.js
  2. jquery.marquee.min.js

Also you can follow this Fiddle


    CSS Howto..

    How can I prevent this plugin from popping up from behind the content area?

    How to replace a Font Awesome icon within link text with a different icon on link click?

    How to add CSS to CKEDITOR?

    How to create a loading image sprite using background position

    css: how to inherit whole class

    How to change the width of an HTML upload field with CSS?

    How to remove CSS mousedown effects

    My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?

    How can I create this shape in CSS? [closed]

    Large white space below footer showing on certain pages on iPhone actual device but not emulator in Chrome

    How to apply Css class to a row using datatables.js?

    How to prevent a div element to be affected by the box-shadow of another div element?

    How to isolate PrimeFaces Widget from being affected by main site CSS

    How To Avoid Certain CSS coding/commands From Overriding Existing Customisations

    how does the path work in css and js

    How can I make a textfield highlight in red only after its input is proven as incorrect?

    How to achieve vertical centering with optional extra element and adjacent matching column, in pure CSS, no tables?

    How to float left without wrapping to next line?

    How can I add a footer to my website similar to the header?

    How to create popup panel using JavaScript & CSS, no libraries?

    How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar

    Popup not showing once per session as wanted (as mentioned by client)

    How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

    How to create a vertical clickable divider|line in bootstrap?

    How to vertically align text to the right of some text using css? [closed]

    GWT - How to create a drop down menu

    How to style nested element that is styled by its parent already

    How I can add td to css style for inputs and its label?

    How to add hover effect to img placed in parent container

    How to change the navbar position? CSS & HTML