jQuery Responsive Carousel Slider with Slideshow – sliderPro

jQuery plugin to create responsive, touch enabled CSS animated carousel slider with basic lightbox and slideshow. The plugin also support video sliding and full screen.

The sliderPro is a lightweight, well design jQuery plugin that helps you to create awesome carousel slider.

Plugin Overview

Plugin: sliderPro
Author: Brandon Winger-Air
Licence: MIT Licence
Published: April 5, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version, jQuery Mobile 1.4.5
and Google Material Design Icons
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 8.48 KB

How to Use Carousel Slider:

1. To getting started with sliderPro, first of all load the jQuery, jQuery Mobile and Google Material Design Iconic Fonts into your HTML page.

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

<!-- jQuery Mobile -->
<script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>

<!-- Material Design Icons CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

2. After that, include the sliderPro‘s CSS and JavaScript file into your webpage.

<!-- sliderPro CSS -->
<link rel="stylesheet" href="css/slider.css">

<!-- sliderPro Js -->
<script src="js/slider.js"></script>

3. Finally Create HTML structure for carousel slider like below and add your images links into it.

<!-- slidePro HTML -->
    <div class="slider-container">
      <div class="slider-carousel">
        <div class="slider">
          <div class="slide-panel">
            <img class="slide-img" src="https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
            <div class="slide-box">
              <h2 class="slide-text">Slide 1</h2>
            </div>
            <div class="slide-overlay"></div>
          </div>
          <div class="slide-panel">
            <img class="slide-img" src="https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
            <div class="slide-box">
              <h2 class="slide-text">Slide 2</h2>
            </div>
          </div>
          <div class="slide-panel">
            <img class="slide-img" src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
            <div class="slide-box">
              <h2 class="slide-text">Slide 3</h2>
            </div>
          </div>
        </div>

        <div class="slider-controls">
          <span class="slider-arrow prev-slide">
            <i class="material-icons">
              keyboard_arrow_left
            </i>
          </span>
          <span class="slider-arrow next-slide">
            <i class="material-icons">
              keyboard_arrow_right
            </i>
          </span>
          <div class="slideshow-toggle">
            <i class="material-icons play-slideshow">
              play_arrow
            </i>
            <i class="material-icons pause-slideshow">
              pause
            </i>
          </div>
          <ul class="slide-selector">
            <li class="slide-selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="slider-modal">
      <span class="slider-close">×</span>
      <div class="modal-slide"></div>
    </div>

The structure you see in the code above slider-container > slider-carousel > slider as well as the class names used are required. For videos add the class slide-video to the video tag.

Note: Plugin will be automatically initialized after including its assets.