jQuery Slideshow

View on GitHub Download ZIP

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="img/slide1.jpg" alt="slide1"/>
	</li>
	<li>
		<img src="img/slide2.jpg" alt="slide2"/>
	</li>
	<li>
		<img src="img/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
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

Examples

Demo 1

$("#demo1").slider({
	speed : 500,
	delay : 2500
});

Demo 2

$("#demo2").slider({
	width : '1280px',
	speed : 500,
	autoplay : false,
	responsive : false
});