Touch Enabled Carousel jQuery Prrple-Slider

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin:	Prrple-Slider
Author:	Prrple
Licence:	MIT Licence
Published:	January 12, 2024
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

Demo Download

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

});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.