jQuery Banner Rotator Slideshow Module Plugin

Switchable slider based on jQuery slideshow module plugin that allows you to create automatic banner rotator with lots of customization options.

jquery banner slider free download, jquery slider carousel, responsive banner slider jquery, draggable image slider jquery, jquery image slider code

How to make use of it:

1. Upload the jQuery library or jQuery switchable plugin to your web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="lib/switchable.js"></script>

2. Wrap your HTML content in a slide show as follows. Note that you have to use the data-src attribute to hold your images.

<div class="g_slide" id="slides">
  <div class="switch_main">
    <a class="item switch_item" href="#"><img data-src="1.jpg"></a>
    <a class="item switch_item" href="#"><img data-src="2.jpg"></a>
    <a class="item switch_item" href="#"><img data-src="3.jpg"></a>
  </div>
</div>

3. Required CSS to design the slideshow.

.g_slide {
  position: relative;
  width: 698px;
  height: 235px;
  overflow: hidden;
}

.g_slide .item {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}

.switch_main { position: relative; }

.g_slide .switch_nav {
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 10px;
  z-index: 11;
  text-align: center;
}

.g_slide .switch_nav_item {
  display: inline-block;
  margin: 0 10px 0 0;
  width: 13px;
  height: 13px;
  line-height: 200px;
  overflow: hidden;
  font-size: 0;
  border-radius: 100%;
  background: #b7b7b7;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.g_slide .switch_nav_item:hover { text-decoration: none; }

.g_slide .switch_nav_item_current { background: #eb6100; }

.g_slide .prev,
.g_slide .next {
  position: absolute;
  top: 50%;
  z-index: 10;
  margin-top: -15px;
  width: 18px;
  height: 30px;
  overflow: hidden;
  background: url(slide.png) no-repeat;
  transition: margin-left .3s ease, margin-right .3s ease;
}

.g_slide .prev {
  left: -18px;
  _left: 10px;
}

.g_slide .next {
  right: -18px;
  _right: 10px;
  background-position: -19px 0;
}

.g_slide .prev:hover { background-position: 0 -70px; }

.g_slide .next:hover { background-position: -19px -70px; }

.g_slide:hover .prev { margin-left: 28px; }

.g_slide:hover .next { margin-right: 28px; }

4. Create a slideshow.

switchable({

  $element: $('#slides'),
  // MORE OPTIONS HERE
    
});

5. Plugin options.

// imgScroll or leave blank
type: '',

// number of items per one slide
imgScroll: {
  num: 2
}

// transition effect
effect: 'slide',

// show next / prev navigation arrows
showNav: true,

// show pagination
showPage: true,

// callback functions
callback: {
  loaded: function () { },
  start: function () { },
  complete: function () { }
},

// animation speed
animateSpeed: 500,

// transition interval
interval: 2000,

// restart delay
restartDelay: 2000,

// pause autoplay on mouse hover
pauseOnHover: true,

// delay the loading of images
loadImg: true,

// enable autoplay
autoPlay: true,

// CSS classes
switchNavEvent: 'click',
switchMainClass: 'switch_main',
switchItemClass: 'switch_item',
pageClass: 'switch_page',
pageItemClass: 'switch_page_item',
navClass: 'switch_nav',
navItemClass: 'switch_nav_item',
navCurrentClass: 'switch_nav_item_current',
mixClass: 'item'

6. Use with required.

<script src="lib/require.js"></script>

require.config({
  paths: {
    'jquery': 'lib/jquery',
    'switchable': 'lib/switchable'
  }
});
require(['jquery', 'switchable'], function($, switchable){
  switchable({
    $element: $('#slides'),
    // MORE OPTIONS HERE
  });
});

lightweight banner slideshow rotator Plugin/Github