Responsive Infinite jQuery Carousel Slider Plugin - LoopSlider

File Size: 2.33 MB
Views Total: 5273
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Infinite jQuery Carousel Slider Plugin - LoopSlider

LoopSlider is a lightweight, responsive, touch-enabled JavaScript / HTML5 slider plugin used to rotate through an unlimited amount of images in a fully responsive and customizable carousel UI.

Key features:

  • Autoplay and pause on hover.
  • Easing effects.
  • Touch enabled.
  • Adapt to any screen size.
  • Specify how many images in one slide.
  • Custom carousel controls.
  • Parallax scrolling effect.
  • Callback functions.

How to use it:

1. Put the CSS in the head section of your HTML document.

<link rel="stylesheet" href="loopslider.css">

2. Add images and captions to the carousel slider as follow.

<div class="demo">
  <figure>
    <img src="1.jpg">
    <figcaption class="caption">Caption 1</figcaption>
  </figure>
  <figure>
    <img src="2.jpg">
    <figcaption class="caption">Caption 2</figcaption>
  </figure>
  <figure>
    <img src="3.jpg">
    <figcaption class="caption">Caption 3</figcaption>
  </figure>
</div>

3. Put jQuery library and the JavaScript file jquery.loopslider.js at the bottom of the document.

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

4. Optionally, you can include jQuery UI library or jQuery easing for more easing effects.

<script src="jquery.easing.min.js"></script>

5. Call the function on the top container to generate a basic image carousel with default settings.

$('.demo').loopslider();

6. Configuration options with default values.

$('.demo').loopslider({

  // custom template
  htmlSliderWraper:'<div style="overflow:hidden;"></div>',
  htmlSliderBody:'<div style="position:relative;"></div>',
  htmlItemWraper:'<div style="float:left;"></div>',
  htmlPaginationContainer:'<div class="slider-pagination"></div>',
  htmlPaginationItem:'<div></div>',

  // how many items on one slide
  visibleItems:3,

  // animation duration
  slideDuration:400,

  // easing effect
  // include jQuery UI or jQuery easing plugin for more easing effects
  easing:'swing',

  // enable touch / swipe support
  touchSupport:true,

  // enable responsive layout
  // responsive: {
  //   480: {visibleItems: 1,step: 1},
  //   760: {visibleItems: 3,step: 3},
  //   1000: {visibleItems: 4,step: 3}
  // }
  responsive:false,

  // enable autoplay
  autoplay:false,

  // pause on hover when autoplay actived
  stopOnHover:false,

  // autoplay interval
  autoplayInterval:3000,

  // fullscreen mode
  fullscreen: false,

  // parallax effect settings
  parallax:null

  // custom carousel controls
  prevButton:null,
  nextButton:null,
  stopButton:null,
  playButton:null,

  // space between slides
  gap:0,

  // amount of slides scrolling each time
  step:1,

  // enable pagination
  pagination:false,

  // enable navigation
  navigation:false,

  // callbacks
  onStop:null,
  onPlay:null,
  onMove:null
  
});

Changelog:

2018-06-08

  • v0.2.1: JS & CSS updated

2016-02-05

  • v0.2: added parallax & fullscreen options.

2016-02-05

  • JS update.

2015-11-16


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