jQuery Slideshow

View on GitHub

Simple jQuery slideshow library. Lightweight, responsive, easy to implement & configure.

Basic Setup

Link the stylesheet inside your head tag

<link rel="stylesheet" type="text/css" href="slider.min.css" />

Add the following HTML for the slider

<ul class="slider" id="slider">
  <li>
    <img src="images/slide1.jpg" alt="slide1"/>
  </li>
  <li>
    <img src="images/slide2.jpg" alt="slide2"/>
  </li>
  <li>
    <img src="images/slide3.jpg" alt="slide3"/>
  </li>
</ul>

Before your closing body tag, link the slider.js file and call .slider() on the slider element

<script type="text/javascript" src="slider.min.js"></script>
<script type="text/javascript">
  $(window).on("load", function() {
    $("#slider").slider();
  });
</script>

Configuration

Config	Type	Default	Description
speed	int	1000	How long the slide animation transition lasts for in milliseconds e.g. 1000 = 1 second
delay	int	3000	How long the slide will be displayed for in milliseconds e.g. 3000 = 3 seconds
autoplay	boolean	true	Whether to start the slideshow automatically
navigation	boolean	true	Whether to display left/right navigation buttons
pagination	boolean	true	Whether to display clickable slide indicators
paginationType	string	dots	Pagination type to use. Options: 'dots', 'thumbnails'
width	string	100%	Width of the slider
height	string	auto	Height of the slider
direction	string	right	The direction that the slider will slide
responsive	boolean	true	Whether to make the size of the slider responsive