Responsive Accesible jQuery Carousel Plugin - pageSwitch.js

Responsive Accesible jQuery Carousel Plugin - pageSwitch.js
File Size: 12.1 KB
Views Total: 2219
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.