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: January 18, 2024
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.

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