Multifunctional Content Slider Plugin For jQuery - Switchable

Switchable is a simple yet fully configurable and multi-purpose jQuery slider plugin which enables the visitor to switch between any elements just like a slideshow, carousel, gallery or tabs component.

How to use it:

1. Just include the jQuery switchable plugin after jQuery library and we're ready to go.

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

2. The Html & JavaScript to create a basic cross-fading slideshow.

<div class="focus-demo">
  <ul class="focus-main">
    <li class="focus-panel red">1</li>
    <li class="focus-panel blue">2</li>
    <li class="focus-panel orange">3</li>
    <li class="focus-panel green">4</li>
  </ul>
  <div class="focus-extra">
    <ul class="focus-nav">
      <li class="focus-item">1</li>
      <li class="focus-item">2</li>
      <li class="focus-item">3</li>
      <li class="focus-item">4</li>
    </ul>
    <div class="focus-page">
      <a href="javascript:void(0)" class="focus-prev">&lt;</a>
      <a href="javascript:void(0)" class="focus-next">&gt;</a>
    </div>
  </div>
</div>

$(".focus-demo").switchable({
  type:"focus",
  contentClass:"focus-main",
  mainClass:"focus-panel",
  bodyExtra:"focus-extra",
  navItem:"focus-item",
  prevClass:"focus-prev",
  nextClass:"focus-next",
  navSelectedClass:"focus-active",
  contentPage:"focus-page"
});

3. The Html & JavaScript to create an infinite-looping content slider / carousel.

<div class="slider-demo" >
  <div class="slider-wrap">
    <ul class="slider-main">
      <li class="slider-panel">1</li>
      <li class="slider-panel">2</li>
      <li class="slider-panel">3</li>
      <li class="slider-panel">4</li>
    </ul>
  </div>
  <div class="slider-extra">
    <ul class="slider-nav">
      <li class="slider-item"></li>
      <li class="slider-item"></li>
      <li class="slider-item"></li>
      <li class="slider-item"></li>
    </ul>
    <div class="slider-page">
      <a href="javascript:void(0)" class="slider-prev">&lt;</a>
      <a href="javascript:void(0)"  class="slider-next">&gt;</a>
    </div>
  </div>
</div>

$(".slider-demo").switchable({
  type:"slider",
  contentClass:"slider-main",
  mainClass:"slider-panel",
  navItem:"slider-item",
  prevClass:"slider-prev",
  nextClass:"slider-next",
  navSelectedClass:"slider-active"
})

4. The Html & JavaScript to create a tabs component that loads content from external files via iframe.

<div class="tab-demo">
  <div class="tab-extra">
    <ul class="tab-nav clearfix">
      <li class="tab-item">1</li>
      <li class="tab-item" data-iframe="1.html">2</li>
      <li class="tab-item" data-iframe="2.html">3</li>
      <li class="tab-item" data-iframe="3.html">4</li>
    </ul>
  </div>
  <div class="tab-main">
    <div class="tab-panel red">1</div>
    <div class="tab-panel blue">2</div>
    <div class="tab-panel orange">3</div>
    <div class="tab-panel green">4</div>
  </div>
</div>

$(".tab-demo-01").switchable({
  type:"tab",
  defaultPanel:0,
  event:"click",
  contentClass:"tab-main",
  mainClass:"tab-panel",
  navItem:"tab-item",
  navSelectedClass:"tab-active",
  contentPage:"tab-page",
  stayTime: 1e3,
  delay:0
})

5. The Html & JavaScript to create a gallery with a thumbnail carousel.

<div class="imgscroll-demo">
  <div class="image-vessel">
      <img class="imgscroll-img">
  </div>
  <div class="imgscroll-body">
    <a href="javascript:void(0)" class="imgscroll-prev">&lt;</a>
    <a href="javascript:void(0)" class="imgscroll-next">&gt;</a>
    <div class="imgscroll-panel-body">
      <ul class="imgscroll-main">
          <li class="imgscroll-panel" ><img class="imgscroll-item"  data-src="1.jpg" src="1.jpg"></li>
          <li class="imgscroll-panel" ><img class="imgscroll-item"  data-src="2.jpg" src="2.jpg"></li>
          <li class="imgscroll-panel" ><img class="imgscroll-item"  data-src="3.jpg" src="3.jpg"></li>
          <li class="imgscroll-panel" ><img class="imgscroll-item"  data-src="4.jpg" src="4.jpg"></li>
          <li class="imgscroll-panel" ><img class="imgscroll-item"  data-src="5.jpg" src="5.jpg"></li>
      </ul>
    </div>
  </div>
</div>

$(".imgscroll-demo").switchable({
  type:"imgscroll",
  bodyClass:"image-vessel",
  contentClass:"imgscroll-main",
  mainClass:"imgscroll-panel",
  mainSelectedClass:"imgscroll-active",
  contentPage:"tab-page",
  imgscrollClass:"imgscroll-img",
  imgscrollItemClass:"imgscroll-item",
  prevClass:"imgscroll-prev",
  nextClass:"imgscroll-next",
  visible:4
});

6. All default options.

$(".el").switchable({

  // 'slider', 'focus', 'imagescroll' or 'tab'
  type: "tab",

  // 'left' or 'top'
  // only for 'slider'
  direction: "left", 

  // CSS classes
  contentClass: "ui-switchable-panel-main", 
  mainClass: "ui-switchable-panel",
  mainSelectedClass: "ui-switchable-panel-selected",
  navItem: "ui-switchable-item",
  navSelectedClass: "ui-switchable-selected",
  prevClass: "ui-switchable-prev", 
  nextClass: "ui-switchable-next", 
  contentPage: "ui-switchable-page", 
  contentPageIsConceal:!1,
  imgscrollClass: "ui-switchable-imgscroll-img", 
  imgscrollItemClass: "ui-switchable-imgscroll-item", 

  // data attribute for 'imagescroll' mode
  imgscrollDataSrc:"data-src",

  // autoplay
  isAutoPlay: false, 

  // pause on hover
  mouseenterStopPlay: true, 

  // default direction
  playDirection: "next",

  // custom event
  event: "mouseover",

  // animation speed
  speed: 400, 

  // animation delay
  delay: 150, 

  // initial slide
  defaultPanel: 0, 

  // stay time
  stayTime: 5e3,

  // calc margin
  includeMargin: false, 

  // width
  width: 0,

  // height
  height: 0,

  // step
  step: 1,  

  // infinite llop
  seamlessLoop: false, 

  // how many items per slide
  visible: 1,

  // custom easing effect
  easing: "swing",

  // arrow navigation
  hasArrow: false,
  arrowClass:"ui-switchable-arrow",

  // data attribute for 'tab' mode
  navIframe: "data-iframe",

  // callbacks
  callback: null,
  onNext: null,
  onPrev: null
  
});

Change log:

2016-06-15

• bugfix

---

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