jQuery Banner Rotator Slideshow Module Plugin | Switchable

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

jquery-banner-slider-free

Official Website(fhqdgv): Click Here

This superior jQuery/javascript plugin is developed by fhqdgv. For extra advanced usage, please go to the official website.

Related Posts

Cookie-Consent-Using-Bootstrap

How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…

Create-HTML-Terminals

Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…

Bootstrap-Alert-Bootbox

Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…

Slider-fg-carousel

An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….

Tags-Input-Component

A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…

copy-to-clipboard-javascript

A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…

Leave a Reply

Your email address will not be published. Required fields are marked *