This time I will share jQuery Plugin and tutorial about Mobile-friendly Carousel With Lightbox Support – jQuery Carousel Slideshow, hope it will help you in programming stack.
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.
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.
2. Load the necessary jQuery and jQuery Mobile libraries in the document.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery.mobile.min.js"></script> |
3. Add images and controls to the slider.
01 |
<div class="slider-container"> |
02 |
<div class="slider-carousel"> |
04 |
<div class="slide-panel"> |
05 |
<img class="slide-img" src="1.jpg" alt=""> |
06 |
<div class="slide-box"> |
07 |
<h2 class="slide-text">Slide 1</h2> |
09 |
<div class="slide-overlay"></div> |
11 |
<div class="slide-panel"> |
12 |
<img class="slide-img" src="2.jpg" alt=""> |
13 |
<div class="slide-box"> |
14 |
<h2 class="slide-text">Slide 2</h2> |
17 |
<div class="slide-panel"> |
18 |
<img class="slide-img" src="3.jpg" alt=""> |
19 |
<div class="slide-box"> |
20 |
<h2 class="slide-text">Slide 3</h2> |
25 |
<div class="slider-controls"> |
26 |
<span class="slider-arrow prev-slide"> |
27 |
<i class="material-icons"> |
31 |
<span class="slider-arrow next-slide"> |
32 |
<i class="material-icons"> |
36 |
<div class="slideshow-toggle"> |
37 |
<i class="material-icons play-slideshow"> |
40 |
<i class="material-icons pause-slideshow"> |
44 |
<ul class="slide-selector"> |
45 |
<li class="slide-selected"></li> |
4. Create the HTML for the gallery lightbox.
1 |
<div class="slider-modal"> |
2 |
<span class="slider-close">×</span> |
3 |
<div class="modal-slide"></div> |
5. Override the default autoplay interval. Default: 6000ms.
1 |
const autoplaySpeed = 6000; |
6. Override the default transition speed. Default: 1.
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.
