jQuery Carousel Slideshow Plugin

1. Introduction

carousel-slideshow-slider is a jQuery plugin to create responsive and touch-enabled carousel sliders. The plugin is built with ES6 JavaScript and jQuery Mobile that allows you to create customizable sliders.

Jquery carousel slideshow slider

2. Plugin Overview

Library	carousel-slideshow-slider
Author	Brandon Winger-Air
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 1.3.1 or Latest version, jQuery Mobile 1.4.5 and Google Material Design Icons

Demo

3. How to install and use carousel-slideshow-slider jQuery plugin

Follow the below steps to install carousel-slideshow-slider jQuery plugin on your website.

3.1. Inside the page's head tag include the required CSS files:

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

<!-- Slider CSS -->
<link href="css/slider.css" rel="stylesheet" type="text/css">

3.2. Just before `</body>` tag, include the required JavaScript files:

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

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

<!-- Slider JS -->
<script src="js/slider.js"></script>

3.3. Create HTML markup:

<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 class="slide-panel">
        <img class="slide-img" src="https://images.pexels.com/photos/917494/pexels-photo-917494.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
        <div class="slide-box">
          <h2 class="slide-text">Slide 4</h2>
        </div>
      </div>
      <div class="slide-panel">
        <img class="slide-img" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
        <div class="slide-box">
          <h2 class="slide-text">Slide 5</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">&times;</span>
  <div class="modal-slide"></div>
</div>

And this is it, you don't have to initialize the plugin.

4. Conclusion

In this article, we presented carousel-slideshow-slider jQuery plugin that lets you create responsive sliders. The plugin comes with many features like lazy loading, full-screen support, video support, support different sized images, deep linking, infinite sliding, smooth CSS3 transitions and many more. With this plugin, you will surely distinguish the content on your website in an unusual way.