Lightweight Responsive Slideshow Plugin with jQuery - eS-slideshow

eS-slideshow is a simple, lightweight, flexible, responsive jQuery slideshow plugin featuring keyboard navigation, pagination, fade in/out transitions and much more.

Features:

• Responsive: This is default by design. All slides must have equal width / height. This plugin is not for variable height photos
• Lightweight: Only 3KB (compressed)
• Navigation: Options for previous and next buttons, pager, as well as keyboard navigation.
• Easy to use: Just include the js/css and called .eSslideshow() any div containing slides
• Flexible: Use images for slides, or use div content (must be equal wide/height). Slideshow adds .eS-active class to active slides so that you can customize CSS3 animations if wanted.

Basic Usage:

1. Load jQuery library together with eS-slideshow.v1.0.css and eS-slideshow.v1.0.min.js in your web page.

<link rel="stylesheet" href="css/eS-slideshow.v1.0.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/eS-slideshow.v1.0.min.js"></script>

2. Insert your images into a DIV container.

<div class="slideshow">
  <img src="https://unsplash.it/800/400?image=593">
  <img src="https://unsplash.it/800/400?image=577">
  <img src="https://unsplash.it/800/400?image=553">
  <img src="https://unsplash.it/800/400?image=535">
  <img src="https://unsplash.it/800/400?image=541">
  <img src="https://unsplash.it/800/400?image=526">
</div>

3. Call the plugin to initialize the slideshow with default options.

$('.slideshow').eSslideshow();

4. Available options.

$('.slideshow').eSslideshow({

// Speed of transition
speed: 500,	

// Time between transitions
interval: 3000,

// Time before slidshow starts
delay: 0,

// Pause the slideshow when mouse over
pauseonhover: true,

// Manual control uses only navigation or keyboard (if enabled)
manual: false,

// Enable the left and right arrows on hover
navigation: true,

// the arrow size is calcuated using this factor, 
// so that it stays proportionate to the size of the slideshow
navfactor: 15,

// Change the previous arrow symbol 
prev: '◄',

// Change the next arrow symbol 
next: '►',

// Adds rounded corners to slideshow
rounding: 20,

// Display the pager
pager: false,

// Allow keyboard navigation on focus
keyboard: true

});

 

---

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