Easy, Customizable And Responsive Slider Plugin - jQuery Slidester

File Size: 29.7 KB
Views Total: 1178
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy, Customizable And Responsive Slider Plugin - jQuery Slidester

A jQuery plugin used for creating an easy, responsive and customizable slider/slideshow component that supports any type of content and allows for various custom configurations on each slide.

How to use it:

1. Import the jQuery Slidester plugin's core JavaScript and CSS files into the webpage which has jQuery library loaded.

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

2. Insert a group of html content into the slider.

<div id="demo" class="slider">
  <div class="images">
    <img src="slides/1.jpg">
    <img src="slides/2.jpg">
    <img src="slides/3.jpg">
    <img src="slides/4.jpg">
    <img src="slides/5.jpg">
    <img src="slides/6.jpg">
  </div>
</div>

3. Active the plugin by calling slidester() on the top container element.

$("#demo").slidester();

4. All default options to customize the slider.

$("#demo").slidester({
  width: null,
  height: null,
  startSlide: 0, // initia slide
  initHeightSpeed: 500,
  initSlideSpeed: 500,
  heightSpeed: 1000,
  animationSpeed: 1500,
  pauseOnHover: true,
  controlButtons: true,
  controlButtonsDisplayClass: "hover"
});

Todo:

  • More animations.
  • Thumbnail preview when hover over the controls.
  • Image captions.

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