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 }); });
See Demo And Download

Official Website(fhqdgv): Click Here
This superior jQuery/javascript plugin is developed by fhqdgv. For extra advanced usage, please go to the official website.