Touch Enabled Carousel jQuery Prrple-Slider

Prrple-Slider is a multi-function, touch enabled and fully configurable jQuery based carousel / image slider plugin. It lets you to create vertical or horizontal carousel with next, previous and dot navigation controls. In short, you can create variety of carousel through this plugin (see the examples on demo page).

Plugin Overview

Plugin: Prrple-Slider
Author: Prrple
Licence: MIT Licence
Published: April 23, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.11.1 or Latest version, Touch Swipe 1.6 or Latest and Font Awesome 4 (Optional)

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 112 KB

How to Use Prrple-Slider Touch Enabled Carousel :

1. To getting started with Prrple-Slider, load the jQuery, Touch Swipe and Font Awesome into your website.

Note: Touch Swipe and Font Awesome are optional.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- jQuery Touch Swipe -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.js"></script>

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">	

2. After that, include the Prrple-Slider‘s CSS and JavaScript file into your HTML document.

<!-- Prrple-Slider CSS -->
<link href="src/css/prrple.slider.css" rel="stylesheet" type="text/css">

<!-- Prrple-Slider Js -->
<script src="src/js/prrple.slider.js"></script>

3. After including all assets, create the HTML structure for carousel / image slider like below.

  <div id="content">
    <div class="container" id="slider0">
      <div class="slider">
        <div class="slider_area">
          <div class="slides">
            <div class="slide">
              <img src="https://source.unsplash.com/1280x720/?fitness">
            </div>
            <div class="slide">
              <img src="https://source.unsplash.com/1280x720/?yoga">
            </div>
            <div class="slide">
             <img src="https://source.unsplash.com/1280x720/?bikni">
            </div>
            <div class="slide">
             <img src="https://source.unsplash.com/1280x720/?girl">
            </div>
          </div>
        </div>
        <a class="slider_left"><i class="fa fa-angle-left"></i></a>
        <a class="slider_right"><i class="fa fa-angle-right"></i></a>
      </div>
</div>
</div>

4. Initialize the plugin (with default settings) in jQuery document ready function to active the carousel slider.

$(document).ready(function(){

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

});

Advance Configuration Options

The following are some advance configuration options (with default values) to create / customize “touch enabled carousel with jQuery”.

$('#slider0 .slider').prrpleSlider({
    debug:            false,               // show console logs?
    // ELEMENTS
    el_slider_area:   '.slider_area',      // define slider area element
    el_slides:        '.slides',           // define slides element
    el_slide:         '.slide',            // define slide elements
    el_left:          '.slider_left',      // define left arrow element
    el_right:         '.slider_right',     // define right arrow element
    el_dotwrap:       '.slider_dotwrap',   // define nav dot wrapper
    el_dot:           '.slider_dot',       // define nav dots
    el_controls:      '.slider_controls',  // define arrow wrapper
    el_play:          '.slider_play',      // define play button
    el_pause:         '.slider_pause',     // define pause button
    // SIZING
    width:            null,          // define specific width
    height:           null,          // define specific height
    spacing:          0,             // spacing between slides
    multiple:         1,             // how many slides in viewport
    // SWIPING
    swiping:          true,          // enable swiping?
    richSwiping:      true,          // use rich swiping?
    // ANIMATION
    direction:        'horizontal',  // horizontal, vertical
    transition:       'slide',       // fade, slide
    transitionTime:   500,           // how long to change slides
    easing:           'swing',       // animation easing
    loop:             true,          // whether or not to infinitely loop the slider
    loopSeamless:     true,          // whether or not a looping slider should seamlessly rotate
    csstransforms:    true,          // use css transforms?
    // AUTOPLAY
    autoPlay:         false,         // play slider automatically?
    autoPlayInterval: 4000,          // how often to automatically switch between slides
    pauseOnClick:     true,          // pause slider after interacting?
    // MISC
    windowsize:       true,          // resize slider on browser resize
    addArrows:        true,          // if arrows don't exist, dynamically add them
    addDots:          true,          // if dots don't exist, dynamically add them
    hideArrows:       true,          // whether to hide arrows if there's only one slide e.g. for dynamically loaded content
    textDots:         false,         // add text to dots (using data-nav attribute)
    firstSlide:       1,             // the slide number to start on
    callback:         null,          // callback function after a slide changes
    callback_end:     null           // callback function after a slide changes and animation completes

});