Basic Responsive jQuery Slideshow/Carousel Plugin - Slideshow

File Size: 111 KB
Views Total: 847
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic Responsive jQuery Slideshow/Carousel Plugin - Slideshow

A basic jQuery slideshow/carousel plugin which allows you to cycle through a set of images with support for auto-rotation and custom controls.

Dependencies:

  • jQuery
  • Tweenmax JS library for animating DOM elements.
  • jQuery knob plugin for circular controls.

How to use it:

1. Include the jQuery, Tweenmax JS library and jQuery knob plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/TweenMax.min.js"></script>
<script type="text/javascript" src="lib/jquery.knob.min.js"></script>

2. Include the jQuery Slideshow plugin after jQuery library.

<script src="jquery-slideshow.js"></script>

3. Insert your images into container elements as follows.

<div id="slider">
  <div class="slider">
    <div> <img width="" height="" src="1.jpg" alt="Slide 1"> </div>
    <div> <img width="" height="" src="2.jpg" alt="Slide 2"> </div>
    <div> <img width="" height="" src="3.jpg" alt="Slide 3"> </div>
  </div>
</div>

4. Call the plugin on the parent element and we're done.

$('#slider').slideshow();

Change log:

2014-09-18

  • Update jquery-slideshow.js

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