Infinite Any Content Slider Plugin For jQuery - infiniteSlider2

infiniteSlider2 is a responsive, customizable, infinitely scrolling slider / carousel plugin for jQuery that works with any types of web content and comes with tons of configuration options.

View more:

• Top 50 Best Carousel jQuery Plugins

How to use it:

1. Create a group of web contents (text, images, etc) for the slider.

<div id="infinite-slider2">
  <div>
    <h1>slide #1</h1>
  </div>
  <div>
    <h1>slide #2</h1>
  </div>
  <div>
    <h1>slide #3</h1>
  </div>
  <div>
    <h1>slide #4</h1>
  </div>
  <div>
    <h1>slide #5</h1>
  </div>
</div>

2. Import both jQuery library and the 'infiniteSlider2.js' script into the webpage.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/infiniteSlider2.js"></script>

3. Active the slider by calling the function on the top container.

$('#infinite-slider2').infiniteSlider2();

4. Config the slider with the following options.

$('#infinite-slider2').infiniteSlider2({

  // general defaults
  width: 100,
  height: 'auto',
  arrows: true,
  toggles: true,
  labels: true,

  // slide background defaults
  slideBackgroundColor: [
    '#5eabe7',
    '#cca27e',
    '#7e4c39',
    '#83595e',
    '#2e2432'
  ],
  slideBackgroundImage: [],

  // arrow defaults
  arrowWidth: 32,
  arrowHeight: 76,
  arrowMargin: 20,
  arrowBackgroundColor: '',
  arrowBackgroundImageRight: '',
  arrowBackgroundImageLeft: '',
  arrowFill: 'white',
  arrowOpacity: 0.4,
  arrowAnimate: true,

  // toggle defaults
  toggleShape: 'circle',
  toggleWidth: 16,
  toggleHeight: 16,
  toggleGutter: 8,
  toggleOpacity: 1,
  toggleColor: '',
  toggleActiveColor: '',
  toggleBorder: '3px solid rgba(255, 255, 255, 0.4)',
  toggleActiveBorder: '3px solid white',
  toggleMargin: 30,
  toggleAnimate: true,

  // label defaults
  slideLabelWidth: 74,
  slideLabelHeight: 74,
  slideLabelBorderWidth: 3,
  slideLabelBorderStyle: 'solid',
  slideLabelBorderColor: 'rgba(255, 255, 255, 0.4)',
  slideActiveLabelBorderColor: 'white',
  slideLabelBackgroundColor: [
    '#5eabe7',
    '#cca27e',
    '#7e4c39',
    '#83595e',
    '#2e2432'
  ],
  slideLabelImage: [],

  // advanced defaults
  autoplay: true,
  slideInterval: 6000,
  slideDuration: 600,
  cursor: 'pointer'
  
});

Change log:

v2.0.4 (2017-03-22)

• JS update

v2.0.3 (2017-03-14)

• JS update

v2.0.2 (2017-02-23)

• JS update

v2.0.1 (2017-02-15)

• JS update

---

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