Basic jQuery Image Carousel/Slider Plugin
File Size: | 12.6 KB |
---|---|
Views Total: | 1294 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simplest jQuery image carousel/slider plugin that cycles through a group of image with a basic slide animation.
How to use it:
1. Include the latest version of jQuery library on your web page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
2. Create a simple image carousel/slider using Html unordered list.
<div class="slider"> <ul> <li><img src="img/img1.gif" alt="image"></li> <li><img src="img/img2.gif" alt="image"></li> <li><img src="img/img3.gif" alt="image"></li> ... </ul> </div>
3. Add the following Javascript snippets into your existing JS file or include the main.js file directly.
function Slider(option) { "use strict"; var setting = { container: ".slider ul", nav: "#slider-nav" }; var el = $.extend({}, setting, option); this.setVars(el); this.init(); } Slider.prototype = { setVars: function(el){ var base = this; base.container = $(el.container); base.nav = $(el.nav).show(); base.imgs = this.container.find("img"); base.imgsLen = this.imgs.length; base.imgsWidth = this.imgs.eq(0).width(); }, init: function () { var base = this; base.nav.find("button").on("click", function () { base.setCurrent($(this).data("dir")); base.setAnimate(); }); }, setCurrent: function (dir) { var pos = this.current; var commandTable = { next: function () { return pos += ~~ (dir === 'next') }, prev: function () { return pos += -1 } }; pos = (isNaN(dir)) ? commandTable[dir]() : dir - 1; this.current = (pos < 0) ? this.imgsLen - 1 : pos % this.imgsLen; }, setAnimate: function (coords) { this.container.animate({ "margin-left": coords || -(this.current * this.imgsWidth) }); } }; // end of prototype $(function () { //object instantiation type var slider = new Slider({ container: ".slider ul", nav: "#slider-nav" }); });
4. Style the image carousel/slider via CSS however you like.
#slider-nav { display: none; margin-top: 1em; } #slider-nav button { padding: 1em; margin-right: 1em; border-radius: 10px; cursor: pointer; } .slider { width: inherit; height: 300px; overflow: hidden; } .slider ul { width: 10000px; list-style: none; } .slider li { float: left; }
This awesome jQuery plugin is developed by flamboyanz. For more Advanced Usages, please check the demo page or visit the official website.