3 Touch-enabled Carousel Templates In jQuery

This is a set of 3 jQuery-powered, responsive, touch-enabled, well-designed carousel/slider templates inspired by Netflix, Disney+, Amazon Video, and more.

How to use it:

Load the latest jQuery library & Font Awesome Iconic Font and we're ready to go.

<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>

Slide Carousel (Live Demo):

1. Load the slide.css and slide.js in the document.

<link rel="stylesheet" href="scripts/slide.css" />
<script src="scripts/slide.js"></script>

2. The HTML structure for the carousel.

<div class="slide-carousel" id="one">
  <div class="arrow-left">&lsaquo;</div>
  <div class="arrow-right">&rsaquo;</div>
  <div class="slides">
    <div class="slide" id="slide1"><span class="title"></span></div>
    <div class="slide" id="slide2"><span class="title"></span></div>
    <div class="slide" id="slide3"><span class="title"></span></div>
    <div class="slide" id="slide4"><span class="title"></span></div>
    <div class="slide" id="slide5"><span class="title"></span></div>
  </div>
  <div class="auto-play">
    <i class="fas fa-play" id="play-slider"></i>
    <i class="fas fa-pause" id="pause-slider"></i>
  </div>
  <div class="dots"></div>
</div>

3. Add images and titles to the carousel.

.slide-carousel .slides .slide#slide1 {
  background: transparent url("1.jpg") no-repeat 50% 50% / cover;
}

.slide-carousel .slides .slide#slide1 .title {
   background: transparent url("title1.jpg") no-repeat 0% 50% / cover;
}

.slide-carousel .slides .slide#slide2 {
  background: transparent url("2.jpg") no-repeat 50% 50% / cover;
}

.slide-carousel .slides .slide#slide1 .title {
   background: transparent url("title2.jpg") no-repeat 0% 50% / cover;
}

...

Strip Carousel (Live Demo):

1. Load the strip.css and strip.js in the document.

<link rel="stylesheet" href="scripts/strip.css" />
<script src="scripts/strip.js"></script>

2. The HTML structure for the carousel.

<div class="strip-carousel" id="mostviewed">
  <div class="arrow-left">&lsaquo;</div>
  <div class="arrow-right">&rsaquo;</div>
  <div class="frames">
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
    <a href="#"><div class="frame"></div></a>
  </div>
</div>

3. Add images to the carousel.

.frame {
  background: transparent url("1.jpg") no-repeat 50% 50% / cover;
}

Top Five (Live Demo):

1. Load the topfive.css and topfive.js in the document.

<link rel="stylesheet" href="scripts/topfive.css" />
<script src="scripts/topfive.js"></script>

2. The HTML structure for the carousel.

<div class="topfive">
  <a href="#">
    <div class="frame" id="topone">
      <img src="1.png" alt="marvel-logo">
      <video id="marvel_bg" class="bgvideo" preload autoplay loop playsinline muted>
        <source src="1.mp4" type="video/mp4">
      </video>
    </div>
  </a>
  <a href="#">
    <div class="frame" id="toptwo">
      <img src="2.png" alt="starwars-logo">
      <video id="starwars_bg" class="bgvideo" preload autoplay loop playsinline muted>
        <source src="2.mp4" type="video/mp4">
      </video>
    </div>
  </a>
  ...
</div>

---

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