One Element Slideshow Plugin with jQuery and HTML5 - hexSlide

hexSlide is a simple, fast jQuery plugin used to render a fully customizable image slider / slideshow from a single img tag using html5 data-* attribute.

How to use it:

1. Add jQuery library together with the jQuery hexSlide plugin's JS and CSS to your web project.

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

2. Add a group of images separated by '|' to an img tag using the data-slideshow-src attribute.

<img src="1.jpg" 
     data-slideshow-src="1.jpg|2.jpg|3.jpg"
>

3. Initialize the slideshow by calling the function on the img tag.

$("img").hexSlide();

4. Customization options with default values.

// transition delay
interval: 3000,

// animation speed
speed: 500,

// randomize the order of the slides
shuffle: false,

// width / height of the slideshow
width: false,
height: false,

// max / min width & height of the slideshow
maxheight: false,
maxwidth: false,
minheight: false,
minwidth: false,

// pause on hover on autoplay mode
pauseOnHover: true,

// enable autoplay
autoPlay: true,

// enable navigation
navigation: true,

// false = show navigation / indicators on hover
alwaysShowNav: false,
alwaysShowIndicators: false,

// stop autoplay on navigation open
stopAutoOnNav: false,

// show bullets pagination
indicators: true,

// enable animations
animation: false,

// additional CSS classes
additionalClass: {
  slide: false,
  container: false
},
additionalCSS: {
  slide: false,
  container: false,
  nextBtn: false,
  nextTxt: false,
  prevBtn: false,
  prevTxt: false
},

// callback function
callback: {
  start: function(){}
},

// text for prev / next buttons
text: {
  previous: "Back",
  next: "Next"
}

---

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