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

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

});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...