Infinite Automatic Scroller Plugin For jQuery - infiniteSlide

The infiniteSlide jQuery plugin lets you create responsive, auto-scrolling, infinite-looping scrollers that use CSS3 animations for the smooth scrolling effect.

Supports both horizontal and vertical directions. Responsive layout based on CSS3 flexbox model.

Typically designed for image slider and also supports mixed content.

How to use it:

1. Create a list of images for the scroller.

<ul class="demo">
  <li><img src="1.jpg" alt="" /></li>
  <li><img src="2.jpg" alt="" /></li>
  <li><img src="3.jpg" alt="" /></li>
  <li><img src="4.jpg" alt="" /></li>
  <li><img src="5.jpg" alt="" /></li>
  <li><img src="6.jpg" alt="" /></li>
  ...
</ul>

2. Download and load the jQuery infiniteSlide plugin's script after loading jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="infiniteslidev2.js"></script>

3. Call the function on the html list to create a basic scroller.

$('.demo').infiniteslide();

4. Change the default animation speed.

$('.demo').infiniteslide({
  'speed': 100
});

5. Change the default scrolling direction.

$('.demo').infiniteslide({

  // up/down/left/right
  'direction': 'left'
  
});

6. Enable/disable the 'pause on hover' functionality.

$('.demo').infiniteslide({
  'pauseonhover': true
});

7. Make the scroller fully responsive across all browser.

$('.demo').infiniteslide({
  'responsive': true // default: false
});

8. Specify how many items to be cloned if there're no enough items.

$('.demo').infiniteslide({
  'clone': 1
});

Changelog:

2022-02-15

• Fix issue with variable scopes

2021-09-28

• Fixed minified version

2020-08-24

• Enable event firing for cloned elements

2018-10-02

• v2

2018-09-15

• update the infiniteslidev2.min.js

---

This awesome jQuery plugin is developed by woodroots. For more Advanced Usages, please check the demo page or visit the official website.