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

File Size: 113 KB
Views Total: 9715
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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 class="slide">
        <div class="slidetitle">2</div>
      <div class="slide">
        <div class="slidetitle">3</div>
  <div class="slider_nav"></div>
  <a class="slide_left">Left</a>
  <a class="slide_right">Right</a>

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


6. Customize your slider with the following options.


  // 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:


  • Code indentation tidy up



  • Improved default CSS styles


  • Improved default CSS styles


  • Remove touchswipe


  • Pause on swipe, css transforms on by default


  • Small fix


  • Much improved remove slider function


  • Separate options for auto adding dots and arrows


  • v2.8: Remove clones


  • fixed for there're only 2 slides


  • Parseint fix


  • Multislide added
  • Width fix


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


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


  • Update options function


  • Tweak to only enable swiping if there are multiple slides


  • 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.