Responsive Accesible jQuery Carousel Plugin - pageSwitch.js

pageSwitch.js is a responsive, accessible jQuery carousel/slider plugin where the user has the ability to navigate between slides using mouse wheel and/or arrow keys.

More features:

• Vertical or horizontal direction.
• Autoplay.
• Easing effects.
• Endless looping.
• Allows to specify the staring index.
• pagination bullets.
• Callback function.
• Cross-browser and fully responsive.

How to use it:

1. Put the CSS in the head section of your HTML document.

<link rel="stylesheet" href="pageSwitch.min.css">

2. The basic html structure.

<div id="container">
  <div class="sections">
    <div class="section" id="section0">
      <h3>this is the page0</h3>
    </div>
    <div class="section" id="section1">
      <h3>this is the page1</h3>
    </div>
    <div class="section" id="section2">
      <h3>this is the page2</h3>
    </div>
    <div class="section" id="section3">
      <h3>this is the page3</h3>
    </div>
  </div>
</div>

3. Add background images to the carousel.

#section0 { background-image: url('1.jpg'); }

#section1 { background-image: url('2.jpg'); }

#section2 { background-image: url('3.jpg'); }

#section3 { background-image: url('4.jpg'); }

4. Auto scale the background images on window resize.

.section {
  background-color: #000;
  background-size: cover;
  background-position: 50% 50%;
  text-align: center;
  color: white;
}

5. Put the JavaScript file pageSwitch.min.js along with the latest jQuery library at the end of of the document.

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

6. Active the carousel plugin on document ready.

$("#container").PageSwitch({
  // options here
});

7. Default parameters for the PageSwitch method.

$("#container").PageSwitch({

  // CSS selectors
  selectors : {
    sections : ".sections",  // container
    section : ".section", // slide
    pages : ".pages", // pagination
    active : ".active" // active slide
  },

  // staring index
  index : 0,

  // easing function
  easing :  "ease",

  // in ms
  duration : 500, 

  // true of false
  loop : false,

  // shows pagination dots
  pagination : true, 

  // enable keyboard navigation
  keyboard : true,

  // horizontal or vertical
  direction : "vertical",

  // enable auto play
  autoPlay: true,

  // in ms
  interval: 3000,

  // fired after change
  callback :  ""
  
});

Change log:

2017-03-06

• Callback update.

2017-03-03

• bugfix.

---

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