Lightweight Banner Slideshow / Rotator Plugin For jQuery - Switchable

Switchable is a lightweight, simple-to-use, AMD compatible jQuery slideshow plugin which lets you create an automatic banner rotator with a plenty of customization options.

How to use it:

1. Load jQuery library and the jQuery switchable plugin in 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 into the slideshow as follow. Note that you should use 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. The required CSS to style 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. Initialize the 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 require.js.

<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
  });
});

---

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