Simple image slider plugin

basic jquery image slider plugin

by shwetaM

HTML

<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <h2>Slide Example</h2>

      <!--  Outer wrapper for presentation only, this can be anything you like -->
      <div id="banner-slide">

        <!-- start Basic Jquery Slider -->
        <ul class="imgSlider">
          <li><a href=""><img src="http://res.cloudinary.com/demo/image/upload/s--Ko8FkC0v--/c_crop,e_viesus_correct,g_south,r_20,w_1000/c_scale,g_north_east,l_viesus_logo,o_50,w_100,x_10,y_10/c_scale,w_600/v1431519366/beach.jpg" title="Caption 1"></a></li>
          <li><img src="http://www.tradeaddresses.com/images/property_photos/non_commercial_2609_width600_virtualtour15185304.jpg" title="Caption 2"></li>
          <li><img src="http://www.nikondigital.org/articles/article_graphics/dLCWYJHSMR0236-drop.jpg" title="Caption 3"></li>
        </ul>
        <!-- end Basic jQuery Slider -->

      </div>
      <!-- End outer wrapper -->

CSS

/* Basic jQuery Slider essential styles */

ul.imgSlider{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.imgSlider-slide{position:absolute; display:none;}
ul.imgSlider-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.imgSlider-controls.v-centered li a{position:absolute;}
ul.imgSlider-controls.v-centered li.imgSlider-next a{right:0;}
ul.imgSlider-controls.v-centered li.imgSlider-prev a{left:0;}
ol.imgSlider-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.imgSlider-markers.h-centered{text-align: center;}
ol.imgSlider-markers li{display:inline;}
ol.imgSlider-markers li a{display:inline-block;}
p.imgSlider-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}


/* Demo CSS - You do not need this css in your own slider */

body{
	font-family: "Open Sans", helvetica, arial;
}

pre{
	font-family: "Source Code Pro", monospace;
	display: block;
	padding: 9.5px;
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 20px;
	word-break: break-all;
	word-wrap: break-word;
	white-space: pre;
	white-space: pre-wrap;
	background-color: whiteSmoke;
	border: 1px solid #CCC;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

h2{
	font-size: 48px;
}

pre + h2{
	margin-top: 80px;
}

#container{
	max-width:620px;
	margin:0 auto;
	padding-bottom:80px;
}

#banner-fade,
#banner-slide{
	margin-bottom: 60px;
}

ul.imgSlider-controls.v-centered li a{
	display:block;
	padding:10px;
	background:#fff;
	color:#000;
	text-decoration: none;
}

ul.imgSlider-controls.v-centered li a:hover{
	background:#000;
	color:#fff;
}

ol.imgSlider-markers li a{
	padding:5px 10px;
	background:#000;
	color:#fff;
	margin:5px;
	text-decoration: none;
}

ol.imgSlider-markers li.active-marker a,
ol.imgSlider-markers li a:hover{
	background: #999;
}

p.imgSlider-caption{
	background: rgba(255,255,255,0.5);
}

JavaScript

(function($) {

    "use strict";

    $.fn.imgSlider = function(o) {

        // slider default settings
        var defaults        = {

            // w + h to enforce consistency
            width           : 700,
            height          : 300,

            // transition valuess
            animtype        : 'fade',
            animduration    : 450,      // length of transition
            animspeed       : 4000,     // delay between transitions
            automatic       : true,     // enable/disable automatic slide rotation

            // control and marker configuration
            showcontrols    : true,     // enable/disable next + previous UI elements
            centercontrols  : true,     // vertically center controls
            nexttext        : 'Next',   // text/html inside next UI element
            prevtext        : 'Prev',   // text/html inside previous UI element
            showmarkers     : true,     // enable/disable individual slide UI markers
            centermarkers   : true,     // horizontally center markers

            // interaction values
            keyboardnav     : true,     // enable/disable keyboard navigation
            hoverpause      : true,     // enable/disable pause slides on hover

            // presentational options
            usecaptions     : true,     // enable/disable captions using img title attribute
            randomstart     : false,     // start from a random slide
            responsive      : false     // enable responsive behaviour

        };

        // create settings from defauls and user options
        var settings        = $.extend({}, defaults, o);

        // slider elements
        var $wrapper        = this,
            $slider         = $wrapper.find('ul.imgSlider'),
            $slides         = $slider.children('li'),

            // control elements
            $ims_wrapper      = null,
            $ims_fwd          = null,
            $ims_prev         = null,

            //...