Mobile-friendly Carousel With Lightbox Support - jQuery Carousel Slideshow

A lightweight, responsive, touch-enabled carousel/slider/slideshow plugin created using jQuery, jQuery Mobile and CSS3 transitions.

Click the image to display the slider in a fullscreen lightbox popup where the users are able to slide through images just like an inline slideshow.

See also:

• 50 Best Carousel jQuery Plugins
• 10 Pure JavaScript Carousel Libraries

More features:

• Keyboard interactions.
• Autoplay and pause on hover.
• Pause autoplay when the window is not in focus.
• Next/prev navigation arrows.
• Pagination bullets.
• Supports swipe events.

How to use it:

1. Load the Material Icons for the navigation arrows.

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

2. Load the necessary jQuery and jQuery Mobile libraries in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.mobile.min.js"></script>

3. Add images and controls to the slider.

<div class="slider-container">
  <div class="slider-carousel">
    <div class="slider">
      <div class="slide-panel">
        <img class="slide-img" src="1.jpg" 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="2.jpg" alt="">
        <div class="slide-box">
          <h2 class="slide-text">Slide 2</h2>
        </div>
      </div>
      <div class="slide-panel">
        <img class="slide-img" src="3.jpg" 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>
      </ul>
    </div>
  </div>
</div>

4. Create the HTML for the gallery lightbox.

<div class="slider-modal">
  <span class="slider-close">&times;</span>
  <div class="modal-slide"></div>
</div>

5. Override the default autoplay interval. Default: 6000ms.

const autoplaySpeed = 6000;

6. Override the default transition speed. Default: 1.

const transitionSpeed = 1;

---

This awesome jQuery plugin is developed by BrandonWingerAir. For more Advanced Usages, please check the demo page or visit the official website.