jQuery Responsive Carousel Slider with Slideshow – sliderPro

Plugin Preview

Share this:

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

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

Demo Download

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.

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.