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

Touch-enabled jQuery Carousel Slider Plugin with jQuery - Prrple Slider
File Size: 55.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 arrow wrapper
  el_controls:    '.slider_controls', 

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

  // define pause button
  el_pause:     '.slider_pause',  

  // define nav dot wrapper
  el_nav:       '.slider_nav',    

  // define nav dots
  el_navdot:      '.slider_navdot', 
  
  // define specific width
  width:        null,       

  // define specific height
  height:       null,       

  // spacing between slides
  spacing:      0,          
  
  // 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,        

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

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

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.