Carousel Types As Used By Netflix, Disney+, Amazon Video, and More

Carousel is a jQuery-powered, responsive, touch-enabled, and well-designed 3 carousels/slider template set inspired by Netflix, Disney +, Amazon Video, and more.

  • Carousels and containers as used by Netflix, Disney +, Amazon Video, and more.
  • All with a responsive design including mouse and touch handling.
  • Made with Html, CSS, and jQuery.
  1. Slice carousel,
  2. Tape and circular bar
  3. The top five

How to make use of it:

Load the most recent jQuery library & Font Awesome Iconic Font and we’re able to go.

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

1. Load the slide.css and slide.js within the doc.

<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 pictures 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;
}

...

Touch-enabled Carousel Templates, carousels Plugin/Github, jquery image slider code, draggable carousel


See Demo And Download

Official Website(Adv4nc3d): Click Here

This superior jQuery/javascript plugin is developed by Adv4nc3d. For extra Advanced Usage, please go to the official website.

Share