Modern Responsive jQuery Carousel Slider Plugin - edslider

Modern Responsive jQuery Carousel Slider Plugin - edslider
File Size: 3.6 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

edslider is a simple, responsive, modern jQuery slider plugin for presenting your images, text or mixed content in carousel style.

Features:

  • Full responsive for any devices.
  • Interval progress bar.
  • Autoplay and infinite looping.
  • Custom skins.
  • Image loading spinner.

How to use it:

1. Download and link to the jQuery edslider plugin's JS and CSS files as follow. Make sure you first have the latest jQuery library installed.

<link rel="stylesheet" href="css/edslider.css">
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/jquery.edslider.js"></script>

2. Create a list of content you want to present in the slider.

<ul class="mySlideshow">
  <li>Your content here</li>
  <li>Your content here</li>
  <li>Your content here</li>
</ul>

3. Initialize the plugin and done.

$(document).ready(function(){
  $('.mySlideshow').edslider({
    width : '100%',
    height: 500
  });
});

4. Default configuration options.

// Set width
width     : 960,

// Set height
height    : 400,

// Start position
position  : 1,

// Interval time between slides (in milliseconds)
interval  : 5000,

// Animation Speed (in milliseconds)
duration  : 500,

// Enable/disable animation
animation : true,

// Enable/disable paginator
paginator : true,

// Enable/disable navigator
navigator : true,

//  Enable/disable interval progress bar
progress  : true,

// Load image url
loadImgSrc: 'images/load.gif',

//  Skin name
skin      : 'edslider'

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