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

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">‹</div>
  <div class="arrow-right">›</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, owl carousel slider example, jquery image slider code, draggable carousel

See Demo And Download