Accessible & Touch-Enable jQuery Content Slider Plugin - slideview-mc

slideview-mc is an easy yet powerful jQuery plugin used to create an accessible, mobile-friendly jQuery content slider with ease.

Features:

• Allows to infinitely scroll through a set of content panels.
• Touch swipe, keyboard, mouse wheel and mouse drag navigation.
• Fully customizable transition effects via CSS3 and Javascript.
• Lots of callback events and public methods available.
• Supports any Html contents like text, images, videos, etc...

How to use it:

1. Make sure to load the jQuery slideview-mc plugin after you have jQuery library installed.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.slideview-mc.js"></script>

2. Embed your Html content into the slider as follows.

<div id="slideview">
  <div class="slide">
    <h2>Slide 1</h2>
    Text Here</div>
  <div class="slide">
    <h2>Slide 2</h2>
    Image Here</div>
  <div class="slide">
    <h2>Slide 3</h2>
    Video Here</div>
  <div class="slide">
    <h2>Slide 4</h2>
    Audio Here</div>
</div>

3. Enable the content slider with one JS call.

$('#slideview').slideview({
// Options
});

4. Available options to customize the content slider.

// currently only swipe is supported
transitionStyle: 'swipe', 

// the duration of the transition in milliseconds
transitionDuration: 750, 

// easing of the transition
transitionEasing: 'swing', 

// position, transform or transform3d
scrollStyle: 'position', 

// specifies whether to use css transitions if supported or not
transitionCSS: true, 

// automatically read content urls from href attribute of the matched elements
linkSelector: null, 

// the selector of the content element
itemSelector: ".slide", 

// slide css class
slideClass: 'slide', 

// preload images before showing slide
preloadImages: false, 

// enables mouse-dragging interaction
mouseDragging: false, 

// enables user-interaction
userInteraction: true, 

// current slide class
currentSlideClass: 'current-slide', 

// control history
locationControl: true, 

// callbacks
slideLoaded: null, 
slideBefore: null, 
slideComplete: null

5. Public methods.

// add the specified item
slideview.add();

// add the specified items
slideview.addAll();

// remove the specified item
slideview.remove();

// remove the specified items
slideview.removeAll();

// get the size of the item collection
slideview.size();

// Refresh the content slider
slideview.invalidate();

// slide to the specified element
slideview.slideTo();

// show the next slide
slideview.next();

// show the previous slide
slideview.previous();

// return current slide index
slideview.getPosition();

// return current slide element
slideview.getCurrentItem();

---

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