How to make marquee continuous.

I have been searching around the web to find a solution for creating a continuous marquee. And after trying a lot of solution I came up with the perfect solution. And I would like to share it with you all.

The solution that I have found is too simple. It just requires three simple steps and the plugin which i have used will be configured as show in the article below.

Step 1 : We have to add a link to the two external JavaScript in the head section of html file. You can use it from CDN or download it and save locally in you project.Here in this example I have used it from the CDN.

1. jquery.marquee.min.js | Download Link
2. jquery.pause.js | Download Link                             

SCRIPT:

1 2	<script src="http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"> <script src="https://rawgit.com/tobia/Pause/master/jquery.pause.js" type="text/javascript">

Step 2 : You have to add a class selector to the div. Here in the below example, I have named it as marquee. You can name it whatever you want according to the requirement. And also you need to add  some simple CSS for the div as shown below.

HTML:

1 2 3 4 5

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

CSS:

1 2 3 4 5

.marquee { width: 300px; /* the plugin works for responsive layouts so width is not necessary */ overflow: hidden; border:1px solid #ccc; }

Step 3 : How to apply the plugin with option to use this marquee selector class.The basic option you need to provide to to make the marquee continuous are duration and duplicated. You can provide other options as per requirement.

JAVASCRIPT:

1 2 3 4 5 6 7 8 9

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

If you want to explore more about this JavaScript follow the link: aamirafridi/jQuery.Marquee. You can find more option to configure your marquee.

Check out my sample on JSFiddle: Example 1 | Example 2 and also my Stack Overflow answer on how to create a continuous marquee logo loop @ Answer Link