jQuery Banner Rotator Slideshow Module Plugin

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

Must Read: A Small, Lightweight jQuery Plugin for Fullscreen Slideshows | extendo

How to make use of it:

1. Upload the jQuery library 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. 参数列表

/**
 * @mod switchable
 * @tuthor zhw
 * @param 参数列表
 *     effect:          {String}    切换效果，默认为slide
 *     showNav:         {Boolean}   是否显示切换导航(0,1,2,3,4..)，默认为true
 *     showPage:        {Boolean}   是否显示翻页(next,prev)，默认为true
 *     animateSpeed:    {Number}    动画执行时间，默认为500
 *     interval:        {Number}    帧切换间隔时间，默认为2000
 *     restartDelay:    {Number}    停止后再次播放延迟时间，默认为2000
 *     pauseOnHover:    {Boolean}   鼠标hover时不否停止播放，默认为true
 *     loadImg:         {Boolean}   是否加载延迟图片(<img data-src="..." />)，默认为true
 *     autoPlay:        {Boolean}   是否自动播放
 *     transformFix:    {Boolean}   CSS3切换，目前未实现
 *     switchNavEvent:  {String}    切换导航(0,1,2,3,4..)事件类型，默认为click
 *     switchMainClass: {String}    切换项目Wrap类名，默认为switch_main
 *     switchItemClass: {String}    切换项目类名，默认为switch_item
 *     pageClass:       {String}    翻页Wrap类名，默认为switch_page
 *     pageItemClass:   {String}    翻页项类名，默认为switch_page_item
 *     navClass:        {String}    切换导航(0,1,2,3,4..)Wrap类名，默认为switch_nav
 *     navItemClass:    {String}    切换导航(0,1,2,3,4..)项类名，默认为switch_nav_item
 *     navCurrentClass: {String}    切换导航(0,1,2,3,4..)选中类名，默认为switch_nav_item_current
 *     mixClass:        {String}    切换图片项类名，默认为item，用于图片滚动切换中，未实现真正图片无缝滚动，利用mixClass组合凑整以幻灯形式切换
**/

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