Touch-enabled jQuery Carousel Slider Plugin with jQuery - Prrple Slider

Prrple Slider is a jQuery plugin for creating a simple yet feature-rich carousel slider that features responsive layout, touch events, custom animations and infinite looping.

More features:

• Horizontal or vertical mode
• slide or fade animations
• Autoplay.
• Cross browser.
• Auto resize slider on browser resize
• Callback functions
• Easing effects. (Requires jQuery easing plugin)

How to use it:

1. Include the jQuery Prrple Slider's CSS file in the head section, which will provide the basic styles for your sliders.

<link href="prrple.slider.css" rel="stylesheet">

2. Include jQuery library and the jQuery Prrple Slider's plugin when needed.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="prrple.slider.js"></script>

3. Include the jQuery touchSwipe plugin that will provide the touch gestures support for your sliders.

<script src="jquery.touchSwipe.min.js"></script>

4. The markup structure for the slider. The plugin currently supports any type of html elements like text, DIVs, images and many more.

<div class="slider">
  <div class="slider_area">
    <div class="slides">
      <div class="slide">
        <div class="slidetitle">1</div>
      </div>
      <div class="slide">
        <div class="slidetitle">2</div>
      </div>
      <div class="slide">
        <div class="slidetitle">3</div>
      </div>
    </div>
  </div>
  <div class="slider_nav"></div>
  <a class="slide_left">Left</a>
  <a class="slide_right">Right</a>
</div>

5. Initialize the plugin with default options to create a basic slider.

$('.slider').prrpleSlider();

6. Customize your slider with the following options.

$('.slider').prrpleSlider({

  // define slider area element
  el_slider_area:   '.slider_area',   

  // define slides element
  el_slides:      '.slides',      

  // define slide elements
  el_slide:     '.slide',     

  // define left arrow element
  el_left:      '.slide_left',    

  // define right arrow element
  el_right:     '.slide_right', 

  // define nav dot wrapper  
  el_dotwrap:     '.slider_dotwrap',  

  // define nav dots
  el_dot:       '.slider_dot',    

  // define arrow wrapper
  el_controls:    '.slider_controls', 

  // define play button
  el_play:      '.slider_play',   

  // define pause button
  el_pause:     '.slider_pause',  
  
  // define specific width
  width:        null,       

  // define specific height
  height:       null,       

  // spacing between slides
  spacing:      0,          

  // how many slides in viewport
  multiple:     1,          

  // enable swiping?
  swiping:      true,      

  // use rich swiping? 
  richSwiping:    true,       
  
  // horizontal or vertical
  direction:      'horizontal', 

  // fade or slide  
  transition:     'fade',

  // how long to change slides
  transitionTime:   500,      

  // requires jquery easing plugin  
  easing:       'swing',      

  // whether or not to infinitely loop the slider
  loop:       false,   

  // whether or not a looping slider should seamlessly rotate     
  loopSeamless:   true,           

  // use css transforms?
  csstransforms:    false,        
  
  // play slider automatically?
  autoPlay:     false,        

  // how often to automatically switch between slides
  autoPlayInterval: 4000,       

  // pause slider after interacting?
  pauseOnClick:   true,       
  
  // resize slider on browser resize
  windowsize:     false,    

  // if arrows don't exist, dynamically add them
  addArrows:      true,       

  // if dots don't exist, dynamically add them    
  addDots:      true,       

  // whether to hide arrows if there's only one slide e.g. for dynamically loaded content
  hideArrows:     true,      

  // add test to dots (using data-nav attribute)
  textDots:     false,        

  // the slide number to start on 
  firstSlide:     1,          

  // callback function after a slide changes
  callback:     null,       

  // callback function after a slide changes and animation completes
  callback_end:   null   
       
});

Change logs:

2018-06-07

• Code indentation tidy up

2017-09-22

• JS update

2017-09-21

• Improved default CSS styles

2017-08-06

• Improved default CSS styles

2017-08-04

• Remove touchswipe

2017-07-10

• Pause on swipe, css transforms on by default

2017-05-04

• Small fix

2017-04-23

• Much improved remove slider function

2017-03-02

• Separate options for auto adding dots and arrows

2017-02-24

• v2.8: Remove clones

2017-01-11

• fixed for there're only 2 slides

2016-12-01

• Parseint fix

2016-11-30

• Multislide added
• Width fix

2016-08-31

• Dynamically add nav dots, with text attributes
• First slide fix

2016-08-12

• Vertical slider bug fix
• Bug fixes and tidied up code

2016-03-14

• Update options function

2016-02-29

• Tweak to only enable swiping if there are multiple slides

2015-12-14

• Tweaks, vertical demos

---

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