10+ JavaScript Carousel Examples

This post contains a total of 10+ JavaScript Carousel Examples with Source Code. All these Carousels are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Carousel Examples

1. CSS and JS Infinite Carousel

Made by Radu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins|Lato|Roboto+Mono&display=swap");
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #d3979a;
  font-family: "Helvetica Neue", "Roboto Mono", "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
  outline: none;
  user-select: none;
}

#carousel-wrapper {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#carousel-wrapper #menu {
  height: 380px;
  width: 720px;
  overflow: hidden;
  font-weight: 700;
  line-height: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: all 0.6s ease-in-out;
}
#carousel-wrapper #menu #current-option {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate(-25%, 0%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#carousel-wrapper #menu #current-option #current-option-text1 {
  font-size: 1.6rem;
  line-height: 3rem;
  width: 220px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#carousel-wrapper #menu #current-option #current-option-text1::before {
  content: attr(data-next-text);
  position: absolute;
  transform: translate(0%, 380px);
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#carousel-wrapper #menu #current-option #current-option-text1::after {
  content: attr(data-previous-text);
  position: absolute;
  transform: translate(0%, -380px);
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#carousel-wrapper #menu #current-option #current-option-text2 {
  font-size: 0.8rem;
  width: 220px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
#carousel-wrapper #menu #current-option #current-option-text2::before {
  content: attr(data-next-text);
  position: absolute;
  transform: translate(0%, 380px);
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
#carousel-wrapper #menu #current-option #current-option-text2::after {
  content: attr(data-previous-text);
  position: absolute;
  transform: translate(0%, -380px);
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
#carousel-wrapper #menu #previous-option {
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  display: block;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23333'%3E%3C/polygon%3E%3C/svg%3E");
  background-size: cover;
  position: absolute;
  transform: translate(310px, 50px);
}
#carousel-wrapper #menu #next-option {
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  display: block;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23333'%3E%3C/polygon%3E%3C/svg%3E");
  background-size: cover;
  position: absolute;
  transform: translate(310px, -50px) rotate(180deg);
}
#carousel-wrapper #image {
  height: 240px;
  width: 240px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 101;
  position: absolute;
  transform: translate(140px, 0);
}
#carousel-wrapper.anim-next {
  pointer-events: none;
}
#carousel-wrapper.anim-next #current-option-text1 {
  animation: next-text 0.65s 0.085s;
}
#carousel-wrapper.anim-next #current-option-text2 {
  animation: next-text 0.65s 0.085s;
}
#carousel-wrapper.anim-next #previous-option {
  animation: next-top-arrow 0.65s 0.085s;
}
#carousel-wrapper.anim-next #next-option {
  animation: next-bottom-arrow 0.65s 0.085s;
}
#carousel-wrapper.anim-next #image {
  animation: next-image 0.65s 0.085s;
}
#carousel-wrapper.anim-previous {
  pointer-events: none;
}
#carousel-wrapper.anim-previous #current-option-text1 {
  animation: previous-text 0.65s 0.085s;
}
#carousel-wrapper.anim-previous #current-option-text2 {
  animation: previous-text 0.65s 0.085s;
}
#carousel-wrapper.anim-previous #previous-option {
  animation: previous-top-arrow 0.65s 0.085s;
}
#carousel-wrapper.anim-previous #next-option {
  animation: previous-bottom-arrow 0.65s 0.085s;
}
#carousel-wrapper.anim-previous #image {
  animation: previous-image 0.65s 0.085s;
}

@keyframes previous-text {
  50%, 55% {
    transform: translate(0%, 390px);
  }
  to {
    transform: translate(0%, 380px);
  }
}
@keyframes previous-top-arrow {
  50% {
    transform: translate(310px, 53px);
  }
}
@keyframes previous-bottom-arrow {
  50% {
    transform: translate(310px, -47px) rotate(180deg);
  }
}
@keyframes previous-image {
  0% {
    transform: translate(140px, 0) scale(1);
    opacity: 1;
  }
  70% {
    transform: translate(140px, 0) scale(1.1);
    opacity: 0;
  }
  100% {
    transform: translate(140px, 0) scale(1);
    opacity: 1;
  }
}
@keyframes next-text {
  50%, 55% {
    transform: translate(0%, -390px);
  }
  to {
    transform: translate(0%, -380px);
  }
}
@keyframes next-top-arrow {
  50% {
    transform: translate(310px, 47px);
  }
}
@keyframes next-bottom-arrow {
  50% {
    transform: translate(310px, -53px) rotate(180deg);
  }
}
@keyframes next-image {
  0% {
    transform: translate(140px, 0) scale(1);
    opacity: 1;
  }
  70% {
    transform: translate(140px, 0) scale(1.1);
    opacity: 0;
  }
  100% {
    transform: translate(140px, 0) scale(1);
    opacity: 1;
  }
}
</style>
</head>
<body>
  <div id="carousel-wrapper">
  <div id="menu">
      <div id="current-option">
        <span id="current-option-text1" data-previous-text="" data-next-text=""></span>
        <span id="current-option-text2" data-previous-text="" data-next-text=""></span>
      </div>
      <button id="previous-option"></button>
      <button id="next-option"></button>
    
  </div>
  <div id="image"></div>
</div>
      <script>
const text1_options = [
"Why art is so important",
"Why you shouldn't buy the new iPhone",
"Is life actually real?",
"How to learn JS in 2 months"];

const text2_options = [
"69 min. read",
"7 min. read",
"8 min. read",
"87,658.1277 min. read"];

const color_options = ["#EBB9D2", "#FE9968", "#7FE0EB", "#6CE5B1"];
const image_options = [
"https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1190&q=80",
"https://images.unsplash.com/photo-1556656793-08538906a9f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
"https://images.unsplash.com/photo-1506073828772-2f85239b6d2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80",
"https://images.unsplash.com/photo-1523800503107-5bc3ba2a6f81?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"];

var i = 0;
const currentOptionText1 = document.getElementById("current-option-text1");
const currentOptionText2 = document.getElementById("current-option-text2");
const currentOptionImage = document.getElementById("image");
const carousel = document.getElementById("carousel-wrapper");
const mainMenu = document.getElementById("menu");
const optionPrevious = document.getElementById("previous-option");
const optionNext = document.getElementById("next-option");

currentOptionText1.innerText = text1_options[i];
currentOptionText2.innerText = text2_options[i];
currentOptionImage.style.backgroundImage = "url(" + image_options[i] + ")";
mainMenu.style.background = color_options[i];

optionNext.onclick = function () {
  i = i + 1;
  i = i % text1_options.length;
  currentOptionText1.dataset.nextText = text1_options[i];

  currentOptionText2.dataset.nextText = text2_options[i];

  mainMenu.style.background = color_options[i];
  carousel.classList.add("anim-next");

  setTimeout(() => {
    currentOptionImage.style.backgroundImage = "url(" + image_options[i] + ")";
  }, 455);

  setTimeout(() => {
    currentOptionText1.innerText = text1_options[i];
    currentOptionText2.innerText = text2_options[i];
    carousel.classList.remove("anim-next");
  }, 650);
};

optionPrevious.onclick = function () {
  if (i === 0) {
    i = text1_options.length;
  }
  i = i - 1;
  currentOptionText1.dataset.previousText = text1_options[i];

  currentOptionText2.dataset.previousText = text2_options[i];

  mainMenu.style.background = color_options[i];
  carousel.classList.add("anim-previous");

  setTimeout(() => {
    currentOptionImage.style.backgroundImage = "url(" + image_options[i] + ")";
  }, 455);

  setTimeout(() => {
    currentOptionText1.innerText = text1_options[i];
    currentOptionText2.innerText = text2_options[i];
    carousel.classList.remove("anim-previous");
  }, 650);
};
    </script>
</body>
</html>

2. Simple Swiping Slider

Made by Katia. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Muli:400,700'> 
<style>
body {
  font-family: "Muli", sans-serif;
}

h2 {
  margin: 15px;
  padding: 0;
}

.o-wrapper {
  max-width: 500px;
  margin: auto;
  overflow: hidden;
  padding-bottom: 50px;
}

.c-slider {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  width: 770px;
}

.c-slide {
  font-weight: normal;
  margin-right: 20px;
  background: #FFFFFF;
  border-radius: 3px;
  border-left: 10px solid #FCEDB7;
  padding: 20px; 
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1;
  overflow: hidden;
}

.c-slide--salad {
  border-color: #A3CCB6;
}

.c-slide--dinner {
  border-color: #EC7871;
}

.c-slide__content {
  width: 100%;
}

.c-slide__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.c-slide__image-wrapper {
  margin: 0;
  padding: 0;
  border-radius: 3px;
  overflow: hidden;
  height: 0;
  padding-top: 66%;
  position: relative;
}

.c-slide__image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  min-height: 100%;
  margin: auto;
  padding: 0;
  transform: translate3d(-50%, -50%, 0);
}

.c-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-drag {
  opacity: 0.2;
}
</style>
</head>
<body>
  <!-- For the Codepen Challenge of January 2019 -->
<div class="o-wrapper">
  <header class="c-header">
    <h2>Recipes</h2>
    <div class="c-drag">
      You're not swiping!
    </div>
  </header>
  
  <div class="c-slider">
    <div class="c-slide c-slide--breakfast">
      <div class="c-slide__content">
        <figure class="c-slide__image-wrapper">
          <img 
            class="c-slide__image"           src="https://images.unsplash.com/photo-1504708706948-13d6cbba4062?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="">
        </figure>
        <h3>Homemade Granola</h3>
      </div>
      
      <div class="c-slide__actions">
        <div class="c-slide__heart">
          <svg width="23" height="20" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.991 18.802a.668.668 0 0 1-.491.2.668.668 0 0 1-.491-.2l-6.964-6.719a3.684 3.684 0 0 1-.307-.29c-.13-.134-.337-.378-.62-.731a9.876 9.876 0 0 1-.759-1.088 6.76 6.76 0 0 1-.597-1.35 4.889 4.889 0 0 1-.262-1.54c0-1.638.472-2.917 1.417-3.84.945-.923 2.251-1.384 3.918-1.384.461 0 .932.08 1.412.24.48.16.926.376 1.339.647.413.272.768.527 1.066.765.297.238.58.49.848.759.268-.268.55-.521.848-.76a14.28 14.28 0 0 1 1.066-.764c.413-.271.86-.487 1.34-.647.48-.16.95-.24 1.411-.24 1.667 0 2.973.461 3.918 1.384.945.923 1.417 2.202 1.417 3.84 0 1.644-.852 3.318-2.556 5.022l-6.953 6.696z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"/>
          </svg>
        </div>
        <a href="/" class="c-slide__link">
          <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.328 9.036a.543.543 0 0 1 .172.395c0 .15-.057.281-.172.396L2.324  17.83a.543.543 0 0 1-.395.172.543.543 0 0 1-.396-.172l-.858-.859a.543.543 0 0 1-.172-.395c0-.149.057-.28.172-.395l6.75-6.75L.675 2.68a.543.543 0 0 1-.172-.395c0-.15.057-.28.172-.395l.858-.86A.543.543 0 0 1 1.93.86c.148 0 .28.057.395.172l8.004 8.004z" fill="#000" fill-rule="evenodd"/>
          </svg>
        </a>
      </div>
    </div>
    
    <div class="c-slide c-slide--salad">
      <div class="c-slide__content">
        <figure class="c-slide__image-wrapper">
          <img 
            class="c-slide__image"           src="https://images.unsplash.com/photo-1538301258798-f3fdb8bbc3c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        </figure>
        <h3>Ceasar Salad</h3>
      </div>
      
      <div class="c-slide__actions">
        <div class="c-slide__heart">
          <svg width="23" height="20" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.991 18.802a.668.668 0 0 1-.491.2.668.668 0 0 1-.491-.2l-6.964-6.719a3.684 3.684 0 0 1-.307-.29c-.13-.134-.337-.378-.62-.731a9.876 9.876 0 0 1-.759-1.088 6.76 6.76 0 0 1-.597-1.35 4.889 4.889 0 0 1-.262-1.54c0-1.638.472-2.917 1.417-3.84.945-.923 2.251-1.384 3.918-1.384.461 0 .932.08 1.412.24.48.16.926.376 1.339.647.413.272.768.527 1.066.765.297.238.58.49.848.759.268-.268.55-.521.848-.76a14.28 14.28 0 0 1 1.066-.764c.413-.271.86-.487 1.34-.647.48-.16.95-.24 1.411-.24 1.667 0 2.973.461 3.918 1.384.945.923 1.417 2.202 1.417 3.84 0 1.644-.852 3.318-2.556 5.022l-6.953 6.696z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"/>
          </svg>
        </div>
        <a href="/" class="c-slide__link">
          <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.328 9.036a.543.543 0 0 1 .172.395c0 .15-.057.281-.172.396L2.324  17.83a.543.543 0 0 1-.395.172.543.543 0 0 1-.396-.172l-.858-.859a.543.543 0 0 1-.172-.395c0-.149.057-.28.172-.395l6.75-6.75L.675 2.68a.543.543 0 0 1-.172-.395c0-.15.057-.28.172-.395l.858-.86A.543.543 0 0 1 1.93.86c.148 0 .28.057.395.172l8.004 8.004z" fill="#000" fill-rule="evenodd"/>
          </svg>
        </a>
      </div>
    </div>
    
    <div class="c-slide c-slide--dinner">
      <div class="c-slide__content">
        <figure class="c-slide__image-wrapper">
          <img 
            class="c-slide__image"           src="https://images.unsplash.com/photo-1523986490752-c28064f26be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=4350&q=80" alt="">
        </figure>
        <h3>Pulled pork</h3>
      </div>
      
      <div class="c-slide__actions">
        <div class="c-slide__heart">
          <svg width="23" height="20" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.991 18.802a.668.668 0 0 1-.491.2.668.668 0 0 1-.491-.2l-6.964-6.719a3.684 3.684 0 0 1-.307-.29c-.13-.134-.337-.378-.62-.731a9.876 9.876 0 0 1-.759-1.088 6.76 6.76 0 0 1-.597-1.35 4.889 4.889 0 0 1-.262-1.54c0-1.638.472-2.917 1.417-3.84.945-.923 2.251-1.384 3.918-1.384.461 0 .932.08 1.412.24.48.16.926.376 1.339.647.413.272.768.527 1.066.765.297.238.58.49.848.759.268-.268.55-.521.848-.76a14.28 14.28 0 0 1 1.066-.764c.413-.271.86-.487 1.34-.647.48-.16.95-.24 1.411-.24 1.667 0 2.973.461 3.918 1.384.945.923 1.417 2.202 1.417 3.84 0 1.644-.852 3.318-2.556 5.022l-6.953 6.696z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"/>
          </svg>
        </div>
        <a href="/" class="c-slide__link">
          <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.328 9.036a.543.543 0 0 1 .172.395c0 .15-.057.281-.172.396L2.324  17.83a.543.543 0 0 1-.395.172.543.543 0 0 1-.396-.172l-.858-.859a.543.543 0 0 1-.172-.395c0-.149.057-.28.172-.395l6.75-6.75L.675 2.68a.543.543 0 0 1-.172-.395c0-.15.057-.28.172-.395l.858-.86A.543.543 0 0 1 1.93.86c.148 0 .28.057.395.172l8.004 8.004z" fill="#000" fill-rule="evenodd"/>
          </svg>
        </a>
      </div>
    </div>

    <div class="c-slide c-slide--salad">
      <div class="c-slide__content">
        <figure class="c-slide__image-wrapper">
          <img 
            class="c-slide__image" src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3900&q=80" alt="">
        </figure>
        <h3>Summer salad</h3>
      </div>
      
      <div class="c-slide__actions">
        <div class="c-slide__heart">
          <svg width="23" height="20" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.991 18.802a.668.668 0 0 1-.491.2.668.668 0 0 1-.491-.2l-6.964-6.719a3.684 3.684 0 0 1-.307-.29c-.13-.134-.337-.378-.62-.731a9.876 9.876 0 0 1-.759-1.088 6.76 6.76 0 0 1-.597-1.35 4.889 4.889 0 0 1-.262-1.54c0-1.638.472-2.917 1.417-3.84.945-.923 2.251-1.384 3.918-1.384.461 0 .932.08 1.412.24.48.16.926.376 1.339.647.413.272.768.527 1.066.765.297.238.58.49.848.759.268-.268.55-.521.848-.76a14.28 14.28 0 0 1 1.066-.764c.413-.271.86-.487 1.34-.647.48-.16.95-.24 1.411-.24 1.667 0 2.973.461 3.918 1.384.945.923 1.417 2.202 1.417 3.84 0 1.644-.852 3.318-2.556 5.022l-6.953 6.696z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"/>
          </svg>
        </div>
        <a href="/" class="c-slide__link">
          <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.328 9.036a.543.543 0 0 1 .172.395c0 .15-.057.281-.172.396L2.324  17.83a.543.543 0 0 1-.395.172.543.543 0 0 1-.396-.172l-.858-.859a.543.543 0 0 1-.172-.395c0-.149.057-.28.172-.395l6.75-6.75L.675 2.68a.543.543 0 0 1-.172-.395c0-.15.057-.28.172-.395l.858-.86A.543.543 0 0 1 1.93.86c.148 0 .28.057.395.172l8.004 8.004z" fill="#000" fill-rule="evenodd"/>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
      <script>
const slider = document.getElementsByClassName('c-slider')[0];
const timeline = new TimelineLite();
const info = document.getElementsByClassName('c-drag')[0];

let canMove = false;
let touchDown = 0;
let prevX = 0;
let slides = document.getElementsByClassName('c-slide');
const slideWidth = slides[0].offsetWidth + 20;


const init = () => {
  slider.addEventListener('mousedown', handleMouse);
  slider.addEventListener('mouseup', handleMouse);
  slider.addEventListener('mousemove', handleMove);

  slider.addEventListener('touchstart', handleTouch);
  slider.addEventListener('touchmove', handleTouchMove);
};

/* Mouse handlers */
const handleMouse = e => {
  if (e.type === 'mouseup') {
    canMove = false;
  } else {
    canMove = true;
  }
};

const handleMove = e => {
  if (e.pageX < prevX && canMove) {
    /* to left */
    info.innerHTML = 'Swiping left!';
    handleSwipeLeft();
    canMove = false;
  } else if (e.pageX > prevX && canMove) {
    /* to right */
    info.innerHTML = 'Swiping right!';
    handleSwipeRight();
    canMove = false;
  }

  prevX = e.pageX;
};

/* Touch handlers */
const handleTouch = e => {
  touchDown = e.touches[0].clientX;
};

const handleTouchMove = e => {
  if (!touchDown) {
    return;
  }

  const touchUp = e.touches[0].clientX;
  const touchDiff = touchDown - touchUp;

  if (touchDiff > 0) {
    info.innerHTML = 'Swiping left!';
    handleSwipeLeft();
  } else {
    info.innerHTML = 'Swiping right!';
    handleSwipeRight();
  }

  touchDown = null;
};

/* Swipe handlers */
const handleSwipeLeft = () => {
  timeline.fromTo(slider, 1,
  {
    x: '0px' },

  {
    x: `-${slideWidth}px`,
    ease: Power4.easeOut });



  timeline.to(slider, 0.001,
  {
    x: '0px',
    onComplete: () => {
      slider.appendChild(slides[0]);
      slides = document.getElementsByClassName('c-slide');
    } });


};

const handleSwipeRight = () => {
  timeline.to(slider, 0.001,
  {
    x: `-${slideWidth}px`,
    onComplete: () => {
      const first = slides[0];
      const last = slides[slides.length - 1];
      slider.insertBefore(last, first);
      slides = document.getElementsByClassName('c-slide');
    } });



  timeline.to(slider, 1,
  {
    x: `0px`,
    ease: Power4.easeOut });

};

init();
    </script>
</body>
</html>

3. 3D Rotating Carousel with CSS and JavaScript

Made by Sitepoint. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<style>
body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

h1 {
  text-align: center;
  margin-bottom: 1.5em;
}

h2 {
  text-align: center;
  color: #555;
  margin-bottom: 0;
}

.carousel {
  padding: 20px;
  perspective: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.carousel > * {
  flex: 0 0 auto;
}
.carousel figure {
  margin: 0;
  width: 40%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}
.carousel figure img {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0px;
}
.carousel figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
}
.carousel nav {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}
.carousel nav button {
  flex: 0 0 auto;
  margin: 0 5px;
  cursor: pointer;
  color: #333;
  background: none;
  border: 1px solid;
  letter-spacing: 1px;
  padding: 5px 10px;
}
</style>
</head>
<body>
  <h1>3D Rotating Carousel Examples</h1>

<h2>Three images</h2>
<div class="carousel">
	<figure>
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

<h2>Four images</h2>
<div class="carousel">
	<figure>
    <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

<h2>Eight images</h2>
<div class="carousel">
	<figure>
    <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
		<img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
		<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
		<img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
		<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

<h2>Eight images, with 20px gap</h2>
<div class="carousel" data-gap="20">
	<figure>
    <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
		<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
		<img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
		<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

<h2>Eight images, with 80px gap</h2>
<div class="carousel" data-gap="80">
	<figure>
    <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
		<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
		<img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
		<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>

<h2>Hidden backfaces</h2>
<div class="carousel" data-gap="20" data-bfc>
	<figure>
    <img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
		<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
		<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
		<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
		<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
		<img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
		<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
		<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
	</figure>
	<nav>
		<button class="nav prev">Prev</button>
		<button class="nav next">Next</button>
	</nav>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

      <script>
window.addEventListener('load', () => {
  var
  carousels = document.querySelectorAll('.carousel');


  for (var i = 0; i < carousels.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    carousel(carousels[i]);
  }window.CP.exitedLoop(0);
});

function carousel(root) {
  var
  figure = root.querySelector('figure'),
  nav = root.querySelector('nav'),
  images = figure.children,
  n = images.length,
  gap = root.dataset.gap || 0,
  bfc = ('bfc' in root.dataset),

  theta = 2 * Math.PI / n,
  currImage = 0;


  setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
  window.addEventListener('resize', () => {
    setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
  });

  setupNavigation();

  function setupCarousel(n, s) {
    var
    apothem = s / (2 * Math.tan(Math.PI / n));


    figure.style.transformOrigin = `50% 50% ${-apothem}px`;

    for (var i = 0; i < n; i++) {if (window.CP.shouldStopExecution(1)) break;
      images[i].style.padding = `${gap}px`;}window.CP.exitedLoop(1);
    for (i = 1; i < n; i++) {if (window.CP.shouldStopExecution(2)) break;
      images[i].style.transformOrigin = `50% 50% ${-apothem}px`;
      images[i].style.transform = `rotateY(${i * theta}rad)`;
    }window.CP.exitedLoop(2);
    if (bfc) {
      for (i = 0; i < n; i++) {if (window.CP.shouldStopExecution(4)) break;if (window.CP.shouldStopExecution(3)) break;
        images[i].style.backfaceVisibility = 'hidden';}window.CP.exitedLoop(4);window.CP.exitedLoop(3);}

    rotateCarousel(currImage);
  }

  function setupNavigation() {
    nav.addEventListener('click', onClick, true);

    function onClick(e) {
      e.stopPropagation();

      var t = e.target;
      if (t.tagName.toUpperCase() != 'BUTTON')
      return;

      if (t.classList.contains('next')) {
        currImage++;
      } else
      {
        currImage--;
      }

      rotateCarousel(currImage);
    }

  }

  function rotateCarousel(imageIndex) {
    figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
  }

}
    </script>
</body>
</html>
 

4. Perspective carousel vanilla js

Made by Flowrome. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
@keyframes heartbeat {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
body {
  color: #ffffff;
  background-color: #27292d;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 1200px;
}

.slider-container {
  position: relative;
  margin: 0 auto;
  width: 800px;
  height: 600px;
}
.slider-container .bullet-container {
  position: absolute;
  bottom: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-container .bullet-container .bullet {
  margin-right: 14px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: white;
  opacity: 0.5;
}
.slider-container .bullet-container .bullet:last-child {
  margin-right: 0px;
}
.slider-container .bullet-container .bullet.active {
  opacity: 1;
}
.slider-container .slider-content {
  position: relative;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 60%;
  transform: translate(-50%, -50%);
}
.slider-container .slider-content .slider-single {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: z-index 0ms 250ms;
}
.slider-container .slider-content .slider-single .slider-single-image {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  transform: scale(0);
  opacity: 0;
}
.slider-container .slider-content .slider-single .slider-single-download {
  position: absolute;
  display: block;
  right: -22px;
  bottom: 12px;
  padding: 15px;
  color: #333333;
  background-color: #fdc84b;
  font-size: 18px;
  font-weight: 600;
  font-family: "karla";
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  opacity: 0;
}
.slider-container .slider-content .slider-single .slider-single-download:hover, .slider-container .slider-content .slider-single .slider-single-download:focus {
  outline: none;
  text-decoration: none;
}
.slider-container .slider-content .slider-single .slider-single-title {
  display: block;
  float: left;
  margin: 16px 0 0 20px;
  font-size: 20px;
  font-family: "karla";
  font-weight: 400;
  color: #ffffff;
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  opacity: 0;
}
.slider-container .slider-content .slider-single .slider-single-likes {
  display: block;
  float: right;
  margin: 16px 20px 0 0;
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  opacity: 0;
}
.slider-container .slider-content .slider-single .slider-single-likes i {
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  color: #ff6060;
  transition: 500ms cubic-bezier(0.17, 0.67, 0.55, 1.43);
  transform: scale(0);
}
.slider-container .slider-content .slider-single .slider-single-likes p {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  color: #ffffff;
}
.slider-container .slider-content .slider-single .slider-single-likes:hover, .slider-container .slider-content .slider-single .slider-single-likes:focus {
  outline: none;
  text-decoration: none;
}
.slider-container .slider-content .slider-single.preactivede .slider-single-image {
  transform: translateX(-50%) scale(0);
}
.slider-container .slider-content .slider-single.preactive {
  z-index: 1;
}
.slider-container .slider-content .slider-single.preactive .slider-single-image {
  opacity: 0.3;
  transform: translateX(-25%) scale(0.8);
}
.slider-container .slider-content .slider-single.preactive .slider-single-download {
  transform: translateX(-150px);
}
.slider-container .slider-content .slider-single.preactive .slider-single-title {
  transform: translateX(-150px);
}
.slider-container .slider-content .slider-single.preactive .slider-single-likes {
  transform: translateX(-150px);
}
.slider-container .slider-content .slider-single.proactive {
  z-index: 1;
}
.slider-container .slider-content .slider-single.proactive .slider-single-image {
  opacity: 0.3;
  transform: translateX(25%) scale(0.8);
}
.slider-container .slider-content .slider-single.proactive .slider-single-download {
  transform: translateX(150px);
}
.slider-container .slider-content .slider-single.proactive .slider-single-title {
  transform: translateX(150px);
}
.slider-container .slider-content .slider-single.proactive .slider-single-likes {
  transform: translateX(150px);
}
.slider-container .slider-content .slider-single.proactivede .slider-single-image {
  transform: translateX(50%) scale(0);
}
.slider-container .slider-content .slider-single.active {
  z-index: 2;
}
.slider-container .slider-content .slider-single.active .slider-single-image {
  opacity: 1;
  transform: translateX(0%) scale(1);
}
.slider-container .slider-content .slider-single.active .slider-single-download {
  opacity: 1;
  transition-delay: 100ms;
  transform: translateX(0px);
}
.slider-container .slider-content .slider-single.active .slider-single-title {
  opacity: 1;
  transition-delay: 200ms;
  transform: translateX(0px);
}
.slider-container .slider-content .slider-single.active .slider-single-likes {
  opacity: 1;
  transition-delay: 300ms;
  transform: translateX(0px);
}
.slider-container .slider-content .slider-single.active .slider-single-likes i {
  animation-name: heartbeat;
  animation-duration: 500ms;
  animation-delay: 900ms;
  animation-interation: 1;
  animation-fill-mode: forwards;
}
.slider-container .slider-left {
  position: absolute;
  z-index: 3;
  display: block;
  right: 85%;
  top: 50%;
  color: #ffffff;
  transform: translateY(-50%);
  padding: 20px 15px;
  border-top: 2px solid #fdc84b;
  border-right: 2px solid #fdc84b;
  border-bottom: 2px solid #fdc84b;
  border-left: 2px solid #fdc84b;
  margin-right: -2px;
}
.slider-container .slider-right {
  position: absolute;
  z-index: 3;
  display: block;
  left: 85%;
  top: 50%;
  color: #ffffff;
  transform: translateY(-50%);
  padding: 20px 15px;
  border-top: 2px solid #fdc84b;
  border-right: 2px solid #fdc84b;
  border-bottom: 2px solid #fdc84b;
  border-left: 2px solid #fdc84b;
  margin-left: -2px;
}
.slider-container .not-visible {
  display: none !important;
}
</style>
</head>
<body>
  <div class="slider-container">

    <div class="slider-content">

        <div class="slider-single">
            <img class="slider-single-image" src="https://picsum.photos/id/973/200/300" alt="1" />
            <h1 class="slider-single-title">Through the Mountains</h1>
            <a class="slider-single-likes" href="javascript:void(0);">
                <i class="fa fa-heart"></i>
                <p>1,247</p>
            </a>
        </div>

        <div class="slider-single">
            <img class="slider-single-image" src="https://picsum.photos/id/974/200/300" alt="2" />
            <h1 class="slider-single-title">Through the Mountains</h1>
            <a class="slider-single-likes" href="javascript:void(0);">
                <i class="fa fa-heart"></i>
                <p>1,247</p>
            </a>
        </div>

        <div class="slider-single">
            <img class="slider-single-image" src="https://picsum.photos/id/975/200/300" alt="3" />
            <h1 class="slider-single-title">Through the Mountains</h1>
            <a class="slider-single-likes" href="javascript:void(0);">
                <i class="fa fa-heart"></i>
                <p>1,247</p>
            </a>
        </div>


        <div class="slider-single">
            <img class="slider-single-image" src="https://picsum.photos/id/976/200/300" alt="4" />
            <h1 class="slider-single-title">Through the Mountains</h1>
            <a class="slider-single-likes" href="javascript:void(0);">
                <i class="fa fa-heart"></i>
                <p>1,247</p>
            </a>
        </div>


        <div class="slider-single">
            <img class="slider-single-image" src="https://picsum.photos/id/977/200/300" alt="5" />
            <h1 class="slider-single-title">Through the Mountains</h1>
            <a class="slider-single-likes" href="javascript:void(0);">
                <i class="fa fa-heart"></i>
                <p>1,247</p>
            </a>
        </div>

        <div class="slider-single">
            <img class="slider-single-image" src="https://picsum.photos/id/978/200/300" alt="6" />
            <h1 class="slider-single-title">Through the Mountains</h1>
            <a class="slider-single-likes" href="javascript:void(0);">
                <i class="fa fa-heart"></i>
                <p>1,247</p>
            </a>
        </div>
    </div>
</div>
      <script>
const repeat = false;
const noArrows = false;
const noBullets = false;


const container = document.querySelector('.slider-container');
var slide = document.querySelectorAll('.slider-single');
var slideTotal = slide.length - 1;
var slideCurrent = -1;

function initBullets() {
  if (noBullets) {
    return;
  }
  const bulletContainer = document.createElement('div');
  bulletContainer.classList.add('bullet-container');
  slide.forEach((elem, i) => {
    const bullet = document.createElement('div');
    bullet.classList.add('bullet');
    bullet.id = `bullet-index-${i}`;
    bullet.addEventListener('click', () => {
      goToIndexSlide(i);
    });
    bulletContainer.appendChild(bullet);
    elem.classList.add('proactivede');
  });
  container.appendChild(bulletContainer);
}

function initArrows() {
  if (noArrows) {
    return;
  }
  const leftArrow = document.createElement('a');
  const iLeft = document.createElement('i');
  iLeft.classList.add('fa');
  iLeft.classList.add('fa-arrow-left');
  leftArrow.classList.add('slider-left');
  leftArrow.appendChild(iLeft);
  leftArrow.addEventListener('click', () => {
    slideLeft();
  });
  const rightArrow = document.createElement('a');
  const iRight = document.createElement('i');
  iRight.classList.add('fa');
  iRight.classList.add('fa-arrow-right');
  rightArrow.classList.add('slider-right');
  rightArrow.appendChild(iRight);
  rightArrow.addEventListener('click', () => {
    slideRight();
  });
  container.appendChild(leftArrow);
  container.appendChild(rightArrow);
}

function slideInitial() {
  initBullets();
  initArrows();
  setTimeout(function () {
    slideRight();
  }, 500);
}

function updateBullet() {
  if (!noBullets) {
    document.querySelector('.bullet-container').querySelectorAll('.bullet').forEach((elem, i) => {
      elem.classList.remove('active');
      if (i === slideCurrent) {
        elem.classList.add('active');
      }
    });
  }
  checkRepeat();
}

function checkRepeat() {
  if (!repeat) {
    if (slideCurrent === slide.length - 1) {
      slide[0].classList.add('not-visible');
      slide[slide.length - 1].classList.remove('not-visible');
      if (!noArrows) {
        document.querySelector('.slider-right').classList.add('not-visible');
        document.querySelector('.slider-left').classList.remove('not-visible');
      }
    } else
    if (slideCurrent === 0) {
      slide[slide.length - 1].classList.add('not-visible');
      slide[0].classList.remove('not-visible');
      if (!noArrows) {
        document.querySelector('.slider-left').classList.add('not-visible');
        document.querySelector('.slider-right').classList.remove('not-visible');
      }
    } else {
      slide[slide.length - 1].classList.remove('not-visible');
      slide[0].classList.remove('not-visible');
      if (!noArrows) {
        document.querySelector('.slider-left').classList.remove('not-visible');
        document.querySelector('.slider-right').classList.remove('not-visible');
      }
    }
  }
}

function slideRight() {
  if (slideCurrent < slideTotal) {
    slideCurrent++;
  } else {
    slideCurrent = 0;
  }

  if (slideCurrent > 0) {
    var preactiveSlide = slide[slideCurrent - 1];
  } else {
    var preactiveSlide = slide[slideTotal];
  }
  var activeSlide = slide[slideCurrent];
  if (slideCurrent < slideTotal) {
    var proactiveSlide = slide[slideCurrent + 1];
  } else {
    var proactiveSlide = slide[0];

  }

  slide.forEach(elem => {
    var thisSlide = elem;
    if (thisSlide.classList.contains('preactivede')) {
      thisSlide.classList.remove('preactivede');
      thisSlide.classList.remove('preactive');
      thisSlide.classList.remove('active');
      thisSlide.classList.remove('proactive');
      thisSlide.classList.add('proactivede');
    }
    if (thisSlide.classList.contains('preactive')) {
      thisSlide.classList.remove('preactive');
      thisSlide.classList.remove('active');
      thisSlide.classList.remove('proactive');
      thisSlide.classList.remove('proactivede');
      thisSlide.classList.add('preactivede');
    }
  });
  preactiveSlide.classList.remove('preactivede');
  preactiveSlide.classList.remove('active');
  preactiveSlide.classList.remove('proactive');
  preactiveSlide.classList.remove('proactivede');
  preactiveSlide.classList.add('preactive');

  activeSlide.classList.remove('preactivede');
  activeSlide.classList.remove('preactive');
  activeSlide.classList.remove('proactive');
  activeSlide.classList.remove('proactivede');
  activeSlide.classList.add('active');

  proactiveSlide.classList.remove('preactivede');
  proactiveSlide.classList.remove('preactive');
  proactiveSlide.classList.remove('active');
  proactiveSlide.classList.remove('proactivede');
  proactiveSlide.classList.add('proactive');

  updateBullet();
}

function slideLeft() {
  if (slideCurrent > 0) {
    slideCurrent--;
  } else {
    slideCurrent = slideTotal;
  }

  if (slideCurrent < slideTotal) {
    var proactiveSlide = slide[slideCurrent + 1];
  } else {
    var proactiveSlide = slide[0];
  }
  var activeSlide = slide[slideCurrent];
  if (slideCurrent > 0) {
    var preactiveSlide = slide[slideCurrent - 1];
  } else {
    var preactiveSlide = slide[slideTotal];
  }
  slide.forEach(elem => {
    var thisSlide = elem;
    if (thisSlide.classList.contains('proactive')) {
      thisSlide.classList.remove('preactivede');
      thisSlide.classList.remove('preactive');
      thisSlide.classList.remove('active');
      thisSlide.classList.remove('proactive');
      thisSlide.classList.add('proactivede');
    }
    if (thisSlide.classList.contains('proactivede')) {
      thisSlide.classList.remove('preactive');
      thisSlide.classList.remove('active');
      thisSlide.classList.remove('proactive');
      thisSlide.classList.remove('proactivede');
      thisSlide.classList.add('preactivede');
    }
  });

  preactiveSlide.classList.remove('preactivede');
  preactiveSlide.classList.remove('active');
  preactiveSlide.classList.remove('proactive');
  preactiveSlide.classList.remove('proactivede');
  preactiveSlide.classList.add('preactive');

  activeSlide.classList.remove('preactivede');
  activeSlide.classList.remove('preactive');
  activeSlide.classList.remove('proactive');
  activeSlide.classList.remove('proactivede');
  activeSlide.classList.add('active');

  proactiveSlide.classList.remove('preactivede');
  proactiveSlide.classList.remove('preactive');
  proactiveSlide.classList.remove('active');
  proactiveSlide.classList.remove('proactivede');
  proactiveSlide.classList.add('proactive');

  updateBullet();
}

function goToIndexSlide(index) {
  const sliding = slideCurrent > index ? () => slideRight() : () => slideLeft();
  while (slideCurrent !== index) {if (window.CP.shouldStopExecution(0)) break;
    sliding();
  }window.CP.exitedLoop(0);
}

slideInitial();
    </script>
</body>
</html>

5. Vertical / Horizontal carousel

Made by Simon. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

.C-carousel {
  background: #212121;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

.C-track {
  opacity: 1;
  transition: all 400ms ease;
}
.C-track--reinit {
  opacity: 0;
  transition: all 0ms linear;
}

.C-slide {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: blueviolet no-repeat center/cover;
  background-blend-mode: overlay;
  font-family: arial;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  overflow: hidden;
}
.C-carousel.initialized .C-slide {
  border-radius: 100vw;
  transform: scale(0.5) skew(-5deg) rotate(0);
  transition: all 700ms ease;
}
.C-carousel.initialized .C-slide.active {
  transform: scale(1) skew(0) rotate(0);
  border-radius: 0;
}
.C-slide:nth-child(1) {
  background-image: url(https://picsum.photos/1480/800?image=11);
}
.C-slide:nth-child(2) {
  background-image: url(https://picsum.photos/1480/800?image=22);
}
.C-slide:nth-child(3) {
  background-image: url(https://picsum.photos/1480/800?image=33);
}
.C-slide:nth-child(4) {
  background-image: url(https://picsum.photos/1480/800?image=44);
}
.C-slide:nth-child(5) {
  background-image: url(https://picsum.photos/1480/800?image=55);
}

.C-navigation {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.C-carousel--vertical .C-navigation {
  bottom: auto;
  left: auto;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}
@media (max-width: 480px) {
  .C-carousel--horizontal .C-navigation {
    bottom: 50px;
  }
}

.C-navigation__dot {
  width: 12px;
  height: 12px;
  background: #fff;
  display: inline-block;
  margin: 4px;
  cursor: pointer;
  border-radius: 50%;
}
.C-navigation__dot.active {
  background: #3333ff;
  transform: scale(1.3);
}

.C-carousel-navigation-button {
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: 2;
  border: 2px solid #fff;
  box-shadow: none;
  border-radius: 5px;
  font-weight: bold;
  color: #fff;
  padding: 10px;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  transition: all 300mes ease;
  text-transform: capitalize;
}
.C-carousel-navigation-button:hover {
  background: #eee;
  color: blueviolet;
}
.C-carousel-navigation-button:active {
  background: #fff;
}
.C-carousel-navigation-button--next {
  left: auto;
  right: 10px;
}
.C-carousel--vertical .C-carousel-navigation-button {
  bottom: 10px;
  top: auto;
  left: auto;
  right: 25px;
  transform: translateY(0);
}
.C-carousel--vertical .C-carousel-navigation-button--next {
  right: 20px;
}
.C-carousel--vertical .C-carousel-navigation-button--prev {
  transform: translatex(calc(-100% - 5px));
}

.C-slide-title {
  padding: 1rem 2rem;
  font-size: 1.5rem;
  position: relative;
  transform: translateY(100%);
  opacity: 0;
  transition: all 300ms ease;
  transition-delay: 500ms;
}
@media (min-width: 480px) {
  .C-slide-title {
    font-size: 2rem;
  }
}
@media (min-width: 768px) {
  .C-slide-title {
    font-size: 42px;
  }
}
.active .C-slide-title {
  transform: translateY(0) translateX(0);
  opacity: 1;
}

/* Pen controls */
.pen-controls {
  position: fixed;
  bottom: 10px;
  left: 10px;
}
.pen-controls button {
  border: 2px solid blueviolet;
  box-shadow: none;
  border-radius: 0;
  font-weight: bold;
  color: blueviolet;
  padding: 10px;
  background: #fff;
  cursor: pointer;
}
</style>
</head>
<body>
  <div class="C-carousel">
  <div class="C-slide"><h1 class="C-slide-title C-slide-title--h1">Vertical / Horizontal carousel</h1></div>
  <div class="C-slide"><div class="C-slide-title">Slide 2</div></div>
  <div class="C-slide"><div class="C-slide-title">Slide 3</div></div>
  <div class="C-slide"><div class="C-slide-title">Slide 4</div></div>
  <div class="C-slide"><div class="C-slide-title">Slide 5</div></div>
</div>

<div class="pen-controls">
  <button class="js-change-carousel-direction" data-carousel-id="C-carousel-0">Change slider direction</button>
</div>
      <script>
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}class Carousel {
  constructor(el, _options = {}) {_defineProperty(this, "getSettings",

    () => {
      return this.settings;
    });_defineProperty(this, "reInitWithOptions",

    (options = {}) => {
      this.carousel.classList.remove('initialized');
      this.track.classList.add('C-track--reinit');
      this.settings = {
        ...this.getSettings(),
        ...options };


      this.init();
      this.onResizeActions();
      this.track.classList.remove('C-track--reinit');
    });_defineProperty(this, "goTo",

    index => {
      this.setState({
        currentSlide: index },
      () => {
        //console.log('Current slide is now: ', this.state.currentSlide);
      });
    });const DEFAULTS = { infinite: true, slideSelector: '.C-slide', initialSlideIndex: 0, vertical: false };this.carousel = el;this.settings = { ...DEFAULTS, ..._options };this.slides = document.querySelectorAll(this.settings.slideSelector);this.state = { currentSlide: this.settings.initialSlideIndex };this.track = null;this.navigation = null;this.navigationButtons = []; // Init
    this.init();}setState(newState, callback = () => undefined) {this.state = { ...this.state, ...newState };this.updateCarousel();return callback();}init() {const { carousel, slides } = this;const { vertical } = this.settings;carousel.classList.remove('C-carousel--vertical');carousel.classList.remove('C-carousel--horizontal');if (vertical) {carousel.classList.add('C-carousel--vertical');} else {carousel.classList.add('C-carousel--horizontal');slides.forEach(slide => {slide.style.float = 'left';});}this.onInitActions();window.addEventListener('resize', () => {setTimeout(() => {this.onResizeActions();}, 100);});}onInitActions() {this.createSlideTrack();this.createNavigation();this.createNavigationButtons();this.updateCarousel();this.carousel.classList.add('initialized');}onResizeActions() {this.setSlideTrackDimensions();}createSlideTrack() {const { slides, carousel, track } = this; // Do not re-create track if it exists
    if (!track) {const track = document.createElement('div');track.classList.add('C-track');slides.forEach(slide => {track.appendChild(slide);});carousel.appendChild(track);this.track = track;}this.setSlideTrackDimensions();}setSlideTrackDimensions() {const { track, slides } = this;slides.forEach(slide => {slide.style.transition = 'none';});const numberOfSlides = slides.length;if (!track) {return;}const { vertical } = this.settings;const height = [...slides].reduce((acc, slide) => acc + slide.offsetHeight, 0);const width = [...slides].reduce((acc, slide) => acc + slide.offsetWidth, 0);track.style.transition = 'none';if (!!vertical) {track.style.width = width / numberOfSlides + 'px';track.style.height = height + 'px';} else {track.style.width = width + 'px';track.style.height = height / numberOfSlides + 'px';}track.style.transition = '';slides.forEach(slide => {slide.style.transition = '';});}updateTrackPosition() {const { slides, track } = this;const numberOfSlides = slides.length;const basePercentage = 100 / numberOfSlides;const { vertical } = this.settings;const { currentSlide } = this.state;const translateValue = !!vertical ? `translateY(-${basePercentage * currentSlide}%)` : `translateX(-${basePercentage * currentSlide}%)`;track.style.transform = translateValue;}createNavigation() {const { slides, carousel, navigation } = this;if (!navigation) {const navigationContainer = document.createElement('div');navigationContainer.classList.add('C-navigation');[...slides].forEach((slide, index) => {navigationContainer.appendChild(this.createNavigationDot(index));});carousel.appendChild(navigationContainer);this.navigation = navigationContainer;}}createNavigationDot(index) {const { currentSlide } = this.state;const navigationDot = document.createElement('div');navigationDot.classList.add('C-navigation__dot');navigationDot.setAttribute('data-slideIndex', index);navigationDot.addEventListener('click', () => {this.goTo(index);});return navigationDot;}createNavigationButtons() {const createNavigationButton = buttonType => {const { carousel } = this;const navigationButton = document.createElement('button');navigationButton.setAttribute('type', 'button');navigationButton.classList.add('C-carousel-navigation-button');navigationButton.classList.add(`C-carousel-navigation-button--${buttonType}`);navigationButton.addEventListener('click', () => {const { slides } = this;const { currentSlide } = this.state;const numberOfSLides = slides.length;const lastSlideIndex = numberOfSLides - 1;if (buttonType === 'next') {const slideToGo = currentSlide + 1;if (slideToGo > lastSlideIndex) {if (!!this.settings.infinite) {return this.goTo(0);}return;} else {this.goTo(slideToGo);}} else {const slideToGo = currentSlide - 1;if (slideToGo < 0) {if (!!this.settings.infinite) {return this.goTo(lastSlideIndex);}return;} else {this.goTo(slideToGo);}}});navigationButton.textContent = buttonType;carousel.appendChild(navigationButton);this.navigationButtons.push(navigationButton);};if (this.navigationButtons.length <= 0) {createNavigationButton('next');createNavigationButton('prev');}}updateNavigation() {const { navigation } = this;const { currentSlide } = this.state;const navigationDots = navigation.querySelectorAll('.C-navigation__dot');navigationDots.forEach(dot => {const dotIndex = parseInt(dot.getAttribute('data-slideIndex'), 10);if (dotIndex === currentSlide) {dot.classList.add('active');} else {dot.classList.remove('active');}});}updateSlides() {const { slides } = this;const { currentSlide } = this.state;slides.forEach((slide, index) => {if (index === currentSlide) {slide.classList.add('active');} else {slide.classList.remove('active');}});}updateCarousel() {
    this.updateTrackPosition();
    this.updateNavigation();
    this.updateSlides();
  }}



const registeredCarousels = [];
const carousels = document.querySelectorAll('.C-carousel');
carousels.forEach((carousel, index) => {
  registeredCarousels.push({
    id: `C-carousel-${index}`,
    carousel: new Carousel(carousel, {
      vertical: true }) });


});

const changeCarouselDirectionButton = document.querySelector('.js-change-carousel-direction');
changeCarouselDirectionButton.addEventListener('click', function (event) {
  const carouselId = this.getAttribute('data-carousel-id');
  const carouselToChange = registeredCarousels.find(carousel => carousel.id === carouselId);
  const settings = carouselToChange.carousel.getSettings();
  const { vertical } = settings;
  carouselToChange.carousel.reInitWithOptions({
    vertical: !vertical });


});
    </script>
</body>
</html>

6. A Dribble Design Implementation

Made by Sergiu Lucutar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
:root {
  font-size: 10px;
  font-family: "Roboto", sans-serif;
  --color1: #E41936;
  --color2: #E7E31D;
  --color3: #3BB7CE;
}
:root * {
  outline: none;
}

html, body, main {
  width: 100%;
  height: 100%;
  margin: 0;
}

main {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
main .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
main .hero-left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main .hero-left h1 {
  text-align: center;
}
main .hero-left button {
  position: absolute;
  padding: 10px 15px;
  margin: 10px;
  border: none;
  background-color: black;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 2;
}
main .hero-left button:last-of-type {
  right: 0;
}
main .hero-left button:active {
  transform: scale(0.9);
}
main .hero-left .layers {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
main .hero-left .layers .layer {
  display: grid;
  grid-template-rows: 6rem 3fr 1fr;
  background-color: white;
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0.5s;
  transform: translateX(100%);
  opacity: 0;
}
main .hero-left .layers .layer-displayed {
  transform: translateX(0);
  opacity: 1;
  z-index: 1;
}
main .hero-left .layers .layer-displayed-exit {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 1;
}
main .hero-left .layers .layer > span {
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
}
main .hero-left .layers .layer__image {
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
}
main .hero-left .layers .layer__info {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  column-gap: 2rem;
  font-size: 1.5rem;
}
main .hero-left .layers .layer__info div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main .hero-left .layers .layer__info div:first-child {
  align-items: flex-end;
  color: gray;
}
main .hero-left .layers .layer__info div:last-child {
  font-weight: bold;
}
main .hero-left .layers .layer:nth-child(1) > span {
  color: var(--color1);
}
main .hero-left .layers .layer:nth-child(2) > span {
  color: var(--color2);
}
main .hero-left .layers .layer:nth-child(3) > span {
  color: var(--color3);
}
main .hero-right {
  grid-column: 2;
  position: relative;
  overflow: hidden;
}
main .hero-right > .layer {
  background-color: #E41936;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0.5s;
}
main .hero-right > .layer-displayed {
  transform: translateX(0);
  z-index: 2;
}
main .hero-right > .layer-displayed-exit {
  transition-delay: 1s;
  transition-duration: 0;
  z-index: 1;
}
main .hero-right > .layer:nth-child(1) {
  background-color: var(--color1);
}
main .hero-right > .layer:nth-child(2) {
  background-color: var(--color2);
}
main .hero-right > .layer:nth-child(3) {
  background-color: var(--color3);
}
main .hero-right .photo-name {
  position: absolute;
  top: 33%;
  left: 50%;
  width: 20%;
  font-size: 1.5rem;
  z-index: 2;
}
main .hero-right .photo-name span {
  display: block;
}
main .hero-right .photo-name__wrapper {
  position: relative;
}
main .hero-right .photo-name__title {
  font-weight: bold;
}
main .hero-right .photo-name .layer {
  padding: 10px;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
main .hero-right .photo-name .layer-displayed {
  transform: translateX(0);
  transition-delay: 0.5s;
}
main .hero-right .photo-frame {
  position: absolute;
  overflow: hidden;
  animation-play-state: paused;
}
main .hero-right .photo-frame:nth-child(4) {
  top: 10%;
  left: 10%;
  width: 40%;
  height: 40%;
  z-index: 3;
}
main .hero-right .photo-frame:nth-child(4) .cover {
  background-color: black;
}
main .hero-right .photo-frame:last-child {
  top: 40%;
  left: 20%;
  width: 65%;
  height: 50%;
  z-index: 2;
}
main .hero-right .photo-frame .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: white;
  transition: width 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
main .hero-right .photo-frame .layer {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition-delay: 0.5s;
}
main .hero-right .photo-frame .layer-displayed {
  opacity: 1;
}

@keyframes cover {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  95% {
    width: 0;
  }
  100% {
    width: 0;
  }
}
</style>
</head>
<body>
  <main>
  <div class="hero-left">
    <h1>NITRO</h1>
    <div class="layers">
      <div class="layer layer-displayed" data-scene="1">
        <span>THE CANNON</span>
        <div class="layer__image" style="background-image: url('http://pngimg.com/uploads/snowboard/snowboard_PNG8008.png')"></div>
        <div class="layer__info">
          <div>
            <strong>Size</strong>
            <strong>Shape</strong>
            <strong>Camber</strong>
            <strong>Width</strong>
            <strong>Flex</strong>
            <strong>Sidecut</strong>
          </div>
          <div>
            <span>123m</span>
            <span>TAPPERED SWALLONTAIL</span>
            <span>TRUE</span>
            <span>MID-WIDE</span>
            <span>ALL TERRAIN</span>
            <span>PROGRESSIVE</span>
          </div>
        </div>
      </div>
      <div class="layer" data-scene="2">
        <span>THE POW</span>
        <div class="layer__image" style="background-image: url('http://pngimg.com/uploads/snowboard/snowboard_PNG8006.png')"></div>
        <div class="layer__info">
          <div>
            <strong>Size</strong>
            <strong>Shape</strong>
            <strong>Camber</strong>
            <strong>Width</strong>
            <strong>Flex</strong>
            <strong>Sidecut</strong>
          </div>
          <div>
            <span>110m</span>
            <span>TWIN</span>
            <span>FALSE</span>
            <span>WIDE</span>
            <span>ALL TERRAIN</span>
            <span>PROGRESSIVE</span>
          </div>
        </div>
      </div>
      <div class="layer" data-scene="3">
        <span>THE SPLASH</span>
        <div class="layer__image" style="background-image: url('http://pngimg.com/uploads/snowboard/snowboard_PNG7998.png')"></div>
        <div class="layer__info">
          <div>
            <strong>Size</strong>
            <strong>Shape</strong>
            <strong>Camber</strong>
            <strong>Width</strong>
            <strong>Flex</strong>
            <strong>Sidecut</strong>
          </div>
          <div>
            <span>126m</span>
            <span>REVERSE CAMBER</span>
            <span>TRUE</span>
            <span>MID-WIDE</span>
            <span>ALL TERRAIN</span>
            <span>PROGRESSIVE</span>
          </div>
        </div>
      </div>
    </div>
    <button onclick="switchLayer(2)"><</button>
    <button onclick="switchLayer()">></button>
  </div>
  <div class="hero-right">
    <div class="layer layer-displayed" data-scene="1"></div>
    <div class="layer" data-scene="2"></div>
    <div class="layer" data-scene="3"></div>
    <div class="photo-frame">
      <div class="layer layer-displayed" style="background-image: url('https://images.unsplash.com/photo-1495468286609-71018e87abc5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=987c55a292efaa0adb9acfc26c06e22a&auto=format&fit=crop&w=670&q=80')" data-scene="1"></div>
      <div class="layer" style="background-image: url('https://images.unsplash.com/photo-1536099876051-79f4cbffeed1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=451b9215ee8acc20d5d7ea354aab570e&auto=format&fit=crop&w=1350&q=80')" data-scene="2"></div>
      <div class="layer" style="background-image: url('https://images.unsplash.com/photo-1512821062947-6eda5253c3e2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=305dedf0e09581de0ee68ab2c9523955&auto=format&fit=crop&w=1351&q=80')" data-scene="3"></div>
      <div class="cover"></div>
    </div>
    <div class="photo-name">
      <div class="photo-name__wrapper">
        <div class="layer layer-displayed" data-scene="1">
          <span class="photo-name__title">BRION FOX</span>
          <span>RIDING THE CANNON</span>
        </div>
        <div class="layer" data-scene="2">
          <span class="photo-name__title">AUSTIN SMITH</span>
          <span>RIDING THE POW</span>
        </div>
        <div class="layer" data-scene="3 ">
          <span class="photo-name__title">SALLY BLUE</span>
          <span>RIDING THE SPLASH</span>
        </div>
      </div>
    </div>
    <div class="photo-frame">
      <div class="layer layer-displayed" style="background-image: url('https://images.unsplash.com/photo-1486335223442-a034129506f6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=564f090b8a99c189845f2ef71d4f620a&auto=format&fit=crop&w=1350&q=80')" data-scene="1"></div>
      <div class="layer" style="background-image: url('https://images.unsplash.com/photo-1522056615691-da7b8106c665?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4f51ed1121800f23da98176659ba7506&auto=format&fit=crop&w=1352&q=80')" data-scene="2"></div>
      <div class="layer" style="background-image: url('https://images.unsplash.com/photo-1478700485868-972b69dc3fc4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=918195bdc5a37a2f412cf49234183427&auto=format&fit=crop&w=1350&q=80')" data-scene="3"></div>
      <div class="cover"></div>
    </div>
  </div>
</main>
      <script>
let sliderIndex = 1;
let timeout;
const layers = [...document.querySelectorAll('.layer')];
const covers = [...document.querySelectorAll('.photo-frame')];

function changeCoverAnimState(state = 0) {
  const st = state === 1 ? 'running' : 'paused';
  covers.forEach(cover => {
    // cover.style['animation-play-state'] = st;
    cover.querySelector('.cover').style.width = `${state * 100}%`;
  });
}

function switchLayer(step = 1) {
  const nextSlide = (sliderIndex + step) % 3 === 0 ? 3 : (sliderIndex + step) % 3;

  changeCoverAnimState(1);
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    changeCoverAnimState(0);
  }, 500);

  for (let i of layers) {
    i.classList.remove('layer-displayed');
    i.classList.remove('layer-displayed-exit');
    if (i.dataset.scene == nextSlide) {
      i.classList.add('layer-displayed');
    }
    if (i.dataset.scene == sliderIndex) {
      i.classList.add('layer-displayed-exit');
    }
  }
  sliderIndex = nextSlide;
}
    </script>
</body>
</html>

7. Carousel with progress bar

Made by Juan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Titillium Web", sans-serif;
}

.carousel {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr 3fr 1.5fr;
  grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
  row-gap: 2vh;
  position: relative;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: 100%;
}
.progress-bar__fill {
  width: 0;
  height: inherit;
  background: #c20000;
  transition: all 0.16s;
}
.progress-bar--primary {
  z-index: 2;
}

.main-post-wrapper {
  grid-row: 1/4;
  grid-column: 1/7;
  position: relative;
}

.slides {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.main-post {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.main-post__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
}
.main-post__image img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.main-post__image::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 13, 14, 0.5);
}
.main-post__content {
  position: absolute;
  top: 40%;
  left: 4%;
  transform: translateY(-40%);
  color: #fff;
  width: 90%;
}
.main-post__tag-wrapper {
  margin: 0;
  display: inline-flex;
  overflow: hidden;
}
.main-post__tag {
  font-size: 0.95em;
  background: #c20000;
  padding: 6px 18px;
}
.main-post__title {
  font-weight: 700;
  font-size: 1.95em;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.main-post__link {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: inline-flex;
  align-items: center;
}
.main-post__link-text {
  font-size: 0.9em;
}
.main-post__link-icon--arrow {
  margin-left: 12px;
}
.main-post__link-icon--play-btn {
  margin-right: 12px;
}

.main-post__link:hover .main-post__link-text,
.main-post__link:hover .main-post__link-icon--arrow path {
  color: #c20000;
  stroke: #c20000;
}

.main-post--active {
  top: 0;
  z-index: 1;
  transition: top 0.9s 0.4s ease-out;
}

.main-post--not-active {
  top: 100%;
  z-index: 0;
  transition: top 0.75s 2s;
}

.main-post.main-post--active .main-post__tag-wrapper {
  width: 25%;
  transition: all 0.98s 1.9s;
}

.main-post.main-post--not-active .main-post__tag-wrapper {
  width: 0;
  transition: width 0.3s 0.2s;
}

.main-post.main-post--active .main-post__title {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s 1.42s, transform 0.5s 1.4s;
}

.main-post.main-post--not-active .main-post__title {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.2s 0.35s, opacity 0.5s 0.2s;
}

.main-post.main-post--active .main-post__link {
  opacity: 1;
  transition: opacity 0.9s 2.2s;
}

.main-post.main-post--not-active .main-post__link {
  opacity: 0;
  transition: opacity 0.5s 0.2s;
}

.posts-wrapper {
  grid-row: 3/4;
  grid-column: 3/6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 14px;
       column-gap: 14px;
  z-index: 1;
}

.post {
  background: rgba(14, 13, 14, 0.6);
  opacity: 0.3;
  color: #fff;
  position: relative;
  padding: 16px 20px;
}
.post__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8em;
}
.post__tag {
  color: #80837e;
}
.post__title {
  font-weight: 400;
  font-size: 0.95em;
  line-height: 1.5;
}
.post--active {
  opacity: 1;
  background: rgba(14, 13, 14, 0.75);
}
.post:not(.post--active) {
  pointer-events: none;
}

.hide-on-mobile {
  display: none;
}

@media screen and (min-width: 768px) {
  .main-post__title {
    font-size: 2.9em;
  }
}
@media screen and (min-width: 1024px) {
  .hide-on-mobile {
    display: grid;
  }

  .posts-wrapper {
    grid-column: 2/6;
  }

  .hide-on-desktop {
    display: none;
  }
}
@media screen and (min-width: 1440px) {
  .main-post__content {
    width: 45%;
  }

  .posts-wrapper {
    grid-column: 3/6;
  }
}
</style>
</head>
<body>
  <div class="carousel">
  <div class="progress-bar progress-bar--primary hide-on-desktop">
    <div class="progress-bar__fill"></div>
  </div>

<header class="main-post-wrapper">
  
  <div class="slides">
    <article class="main-post main-post--active">
      <div class="main-post__image">
        <img src="https://www.formula1.com/content/dam/fom-website/manual/Misc/2019-Races/Monaco2019/McLarenMonaco19.jpg.transform/9col/image.jpg" alt="New McLaren wind tunnel 'critical' to future performance, says Tech Director Key" />
      </div>
      <div class="main-post__content">
        <div class="main-post__tag-wrapper">
          <span class="main-post__tag">News</span>
        </div>
        <h1 class="main-post__title">New McLaren wind tunnel 'critical' to future performance, says Tech Director Key</h1>
        <a class="main-post__link" href="#">
              <span class="main-post__link-text">find out more</span>
              <svg
                class="main-post__link-icon main-post__link-icon--arrow"
                width="37"
                height="12"
                viewBox="0 0 37 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
                  stroke="white"
                />
              </svg>
            </a>
      </div>
    </article>
    <article class="main-post main-post--not-active">
      <div class="main-post__image">
        <img src="https://www.formula1.com/content/dam/fom-website/sutton/2019/Hungary/Saturday/1017645792-LAT-20190803-_2ST5188.jpg.transform/9col-retina/image.jpg" alt="What To Watch For in the 2019 Hungarian Grand Prix" />
      </div>
      <div class="main-post__content">
        <div class="main-post__tag-wrapper">
          <span class="main-post__tag">Video</span>
        </div>
        <h1 class="main-post__title">What To Watch For in the 2019 Hungarian Grand Prix</h1>
        <a class="main-post__link" href="#">
              <svg
                class="main-post__link-icon main-post__link-icon--play-btn"
                width="30"
                height="30"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="10"
                  cy="10"
                  r="9"
                  stroke="#C20000"
                  stroke-width="2"
                />
                <path d="M14 10L8 6V14L14 10Z" fill="white" />
              </svg>
              <span class="main-post__link-text">play video</span>
            </a>
      </div>
    </article>
    <article class="main-post main-post--not-active">
      <div class="main-post__image">
        <img src="https://www.formula1.com/content/dam/fom-website/manual/Misc/2019-Races/Austria-2019/Top3Austria2019.jpg.transform/9col-retina/image.jpg" alt="Hamilton wants harder championship fight from Leclerc and
            Verstappen" />
      </div>
      <div class="main-post__content">
        <div class="main-post__tag-wrapper">
          <span class="main-post__tag">News</span>
        </div>
        <h1 class="main-post__title">Hamilton wants harder championship fight from Leclerc and Verstappen
        </h1>
        <a class="main-post__link" href="#">
              <span class="main-post__link-text">find out more</span>
              <svg
                class="main-post__link-icon main-post__link-icon--arrow"
                width="37"
                height="12"
                viewBox="0 0 37 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
                  stroke="white"
                />
              </svg>
            </a>
      </div>
    </article>
  </div>
</header>

<div class="posts-wrapper hide-on-mobile">
  <article class="post post--active">
    <div class="progress-bar">
      <div class="progress-bar__fill"></div>
    </div>
    <header class="post__header">
      <span class="post__tag">News</span>
      <p class="post__published">16 August 2019</p>
    </header>
    <h2 class="post__title">New McLaren wind tunnel 'critical' to future performance, says Tech Director Key</h2>
  </article>
  <article class="post">
    <div class="progress-bar">
      <div class="progress-bar__fill"></div>
    </div>
    <header class="post__header">
      <span class="post__tag">Video</span>
      <p class="post__published">12 August 2019</p>
    </header>
    <h2 class="post__title">What To Watch For in the 2019 Hungarian Grand Prix</h2>
  </article>
  <article class="post">
    <div class="progress-bar">
      <div class="progress-bar__fill"></div>
    </div>
    <header class="post__header">
      <span class="post__tag">News</span>
      <p class="post__published">08 August 2019</p>
    </header>
    <h2 class="post__title">Hamilton wants harder championship fight from Leclerc and Verstappen
    </h2>
  </article>
</div>
</div>
<main style="min-height: 100vh; background: red;"></main>
      <script>
let mainPosts = document.querySelectorAll(".main-post");
let posts = document.querySelectorAll(".post");

let i = 0;
let postIndex = 0;
let currentPost = posts[postIndex];
let currentMainPost = mainPosts[postIndex];

let progressInterval = setInterval(progress, 100); // 180

function progress() {
  if (i === 100) {
    i = -5;
    // reset progress bar
    currentPost.querySelector(".progress-bar__fill").style.width = 0;
    document.querySelector(
    ".progress-bar--primary .progress-bar__fill").
    style.width = 0;
    currentPost.classList.remove("post--active");

    postIndex++;

    currentMainPost.classList.add("main-post--not-active");
    currentMainPost.classList.remove("main-post--active");

    // reset postIndex to loop over the slides again
    if (postIndex === posts.length) {
      postIndex = 0;
    }

    currentPost = posts[postIndex];
    currentMainPost = mainPosts[postIndex];
  } else {
    i++;
    currentPost.querySelector(".progress-bar__fill").style.width = `${i}%`;
    document.querySelector(
    ".progress-bar--primary .progress-bar__fill").
    style.width = `${i}%`;
    currentPost.classList.add("post--active");

    currentMainPost.classList.add("main-post--active");
    currentMainPost.classList.remove("main-post--not-active");
  }
}
    </script>
</body>
</html>
 

8. Minimal Carousel with horizontal scroll + snap, mobile & mouse friendly

Made by Frederic R. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.gallery {
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(10, 80vw);
	grid-template-rows: 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	overflow: scroll;
	height: 90vh;
	scroll-snap-type: both mandatory;
	scroll-padding: 1rem;
}

.active {
	scroll-snap-type: unset;
}

li {
	scroll-snap-align: center;
	display: inline-block;
	border-radius: 3px;
	font-size: 0;
}
</style>
</head>
<body>
  <ul class="gallery">
	<li style="background: #f6bd60;"></li>
	<li style="background: #f7ede2;"></li>
	<li style="background: #f5cac3;"></li>
	<li style="background: #84a59d;"></li>
	<li style="background: #f28482;"></li>
</ul>
      <script>
const slider = document.querySelector('.gallery');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', e => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', _ => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', _ => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', e => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const SCROLL_SPEED = 3;
  const walk = (x - startX) * SCROLL_SPEED;
  slider.scrollLeft = scrollLeft - walk;
});
    </script>
</body>
</html>

9. Blob carousel for the planet

Made by Paulina Hetman. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Rubik:700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
h1 {
  margin: 0;
  font-size: calc(2vw + 20px);
  position: absolute;
  left: 10%;
  transform: translateZ(0.1px) scale(1.2);
  font-family: Rubik;
  color: #b5ae84;
  opacity: 0.5;
}
h1.clone {
  left: 60%;
}
body {
  background: #181818;
  color: white;
  font-size: 200%;
}
.defilee__main {
  position: relative;
  margin: 0 auto;
}
.defilee__outer {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  perspective: 0.5px;
  transform-style: preserve-3d;
  overflow-x: hidden;
}
.defilee__main,
.defilee__main *,
.defilee__outer,
.defilee__outer * {
  box-sizing: border-box;
}
.defilee__ctnr {
  transform-style: preserve-3d;

  display: inline-flex;
  align-items: center;
  margin: 0 auto;
}

.defilee__div {
  position: relative;
  transform: translate3d(0, -16vh, 0);
  width: 25vw;
  margin: 0 -2vw;
}
.defilee__div--special {
  transform: translateZ(-0.2px) scale(1.4) translateX(30px) translateY(20vh);
}
.defilee__div--special1 {
  transform: translateZ(-0.25px) scale(1.4) translateX(-0.3vw) translateY(0);
}
.defilee__div--special2 {
  transform: translateZ(0.2px) scale(1) translateX(0.5vw) translateY(-25vh);
}
.defilee__div--special3 {
  transform: translateZ(-0.5px) scale(1.5) translateX(-30px) translateY(-30vh);
}
.defilee__div--special4 {
  transform: translateZ(-0.65px) scale(3) translateX(30px) translateY(-10vh);
}
.defilee__ctnr {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.defilee__ctnr {
  animation: slide 30s linear infinite;
}
@keyframes slide {
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

* {
  transform-origin: 50% 50%;
}
.defilee-visually-hidden {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}
</style>
</head>
<body>
  <div id="defs" class="defilee-visually-hidden">
  <svg width="0" height="0" viewBox="0 0 600 600" id="axure-svg">
    <defs>
      <clipPath id="path-1" transform="translate(300,300)">
        <path data-morph-to="M 107.4 -157.9 C 144.8 -143 184.7 -122.8 213.5 -89 C 242.2 -55.1 259.7 -7.6 254.7 37.6 C 249.8 82.9 222.4 125.9 184.7 148.4 C 147.1 170.8 99.2 172.7 57.4 176.2 C 15.6 179.7 -20.1 184.9 -53.3 177.1 C -86.6 169.4 -117.3 148.9 -148.6 123.1 C -179.9 97.2 -211.7 66.1 -218.4 30.4 C -225.1 -5.3 -206.7 -45.7 -193.1 -93.4 C -179.4 -141.2 -170.5 -196.4 -139.2 -214 C -107.8 -231.7 -53.9 -211.8 -9.5 -197.1 C 35 -182.4 69.9 -172.8 107.4 -157.9 Z" class="anime" d="M 109 -171.3 C 151 -142.7 201.5 -128.9 229 -96.4 C 256.4 -64 260.8 -12.9 242 26.3 C 223.2 65.6 181.1 93 149 127.8 C 116.8 162.5 94.6 204.6 61.7 217.7 C 28.7 230.9 -14.9 215.2 -54.3 197.8 C -93.7 180.4 -128.9 161.3 -151.4 132.6 C -174 104 -184 66 -196.4 24.1 C -208.8 -17.7 -223.6 -63.3 -217 -108 C -210.4 -152.8 -182.5 -196.7 -142.8 -226.4 C -103.1 -256.1 -51.5 -271.5 -9 -257.5 C 33.5 -243.5 67 -200 109 -171.3 Z" />
      </clipPath>
      <clipPath id="path-2" transform="translate(300,300)">
        <path data-morph-to="M 133.3 -193.4 C 174.7 -180.8 211.5 -147.1 204.2 -109.1 C 196.9 -71.1 145.5 -28.8 122.8 6.4 C 100.2 41.5 106.4 69.6 102 105.5 C 97.5 141.5 82.4 185.4 59.2 184.3 C 36 183.3 4.6 137.2 -23.2 113.4 C -51.1 89.6 -75.4 88 -92.7 76 C -110.1 63.9 -120.4 41.3 -145.1 8 C -169.9 -25.3 -209.1 -69.3 -205.3 -100.4 C -201.4 -131.4 -154.5 -149.4 -113.1 -162 C -71.7 -174.6 -35.9 -181.8 5 -189.7 C 46 -197.5 91.9 -206 133.3 -193.4 Z" class="anime" d="M 87.5 -116.1 C 125.2 -111.9 175.9 -107.7 182.7 -85.5 C 189.6 -63.4 152.7 -23.4 138.5 14.3 C 124.3 51.9 132.8 87.2 125.4 124.9 C 118 162.6 94.6 202.7 65.6 200.8 C 36.6 198.9 2 155.1 -31.7 133.5 C -65.4 112 -98.1 112.6 -132 99.7 C -166 86.9 -201.3 60.4 -194.4 34.8 C -187.4 9.1 -138.3 -15.8 -107.4 -34.8 C -76.5 -53.8 -64 -66.8 -49.1 -81.6 C -34.2 -96.3 -17.1 -112.6 3.9 -118.7 C 24.9 -124.7 49.7 -120.4 87.5 -116.1 Z" />
      </clipPath>
      <clipPath id="path-3" transform="translate(300,300)">
        <path data-morph-to="M 179.9 -148.8 C 223.3 -89.1 241.8 -14.8 227.9 54.3 C 213.9 123.4 167.5 187.4 106.5 214 C 45.6 240.6 -29.9 229.7 -95 198.1 C -160 166.4 -214.5 113.9 -230.4 50.7 C -246.4 -12.5 -223.6 -86.4 -178.8 -146.4 C -134 -206.5 -67 -252.7 0.7 -253.3 C 68.3 -253.8 136.6 -208.6 179.9 -148.8 Z" class="anime" d="M 166.3 -136.4 C 201.2 -88.8 205.4 -20.5 190.1 42 C 174.7 104.6 139.9 161.3 88.4 187.6 C 37 213.8 -31 209.6 -92.6 183.4 C -154.3 157.1 -209.8 108.8 -224.3 49.9 C -238.8 -9.1 -212.4 -78.8 -168.2 -128.5 C -124.1 -178.3 -62 -208.1 1.8 -209.6 C 65.7 -211 131.3 -184.1 166.3 -136.4 Z" />
      </clipPath>
        <clipPath id="path-4" transform="translate(300,300)">
        <path data-morph-to="M 70.5 -74.2 C 95.7 -24.7 123.4 4.9 128.3 47.6 C 133.1 90.3 115.2 146 69.9 181.9 C 24.7 217.7 -47.7 233.7 -111.4 210.8 C -175 188 -229.8 126.5 -220.6 76.3 C -211.4 26.1 -138.2 -12.8 -90.7 -67.5 C -43.3 -122.2 -21.6 -192.6 0.5 -193 C 22.7 -193.4 45.3 -123.8 70.5 -74.2 Z" class="anime" d="M 167.9 -131.9 C 201.9 -91.3 202.8 -22.4 181 28.5 C 159.1 79.4 114.5 112.2 66.4 133.7 C 18.4 155.3 -33.1 165.5 -75.5 148.3 C -117.8 131.1 -151 86.6 -154.3 43.5 C -157.5 0.4 -130.7 -41.3 -100 -81.1 C -69.3 -120.9 -34.7 -159 16.2 -171.9 C 67 -184.7 134 -172.5 167.9 -131.9 Z" />
      </clipPath>
        <clipPath id="path-5" transform="translate(300,300)">
        <path data-morph-to="M 58.3 -47 C 72.3 -29 78 -4.9 69.3 8.7 C 60.5 22.4 37.2 25.6 13 43.6 C -11.1 61.6 -36.2 94.3 -65 95.5 C -93.8 96.8 -126.3 66.5 -133.3 31.6 C -140.3 -3.3 -121.8 -42.8 -95.3 -63.7 C -68.8 -84.5 -34.4 -86.8 -6.1 -81.9 C 22.2 -77 44.3 -65 58.3 -47 Z" class="anime" d="M 78.3 -67.6 C 102.3 -32.3 123.3 0.3 122.6 37.9 C 121.9 75.4 99.6 117.9 70.7 122.5 C 41.8 127 6.4 93.7 -41.3 74.9 C -88.9 56.1 -148.8 51.9 -160.4 28.7 C -171.9 5.6 -135.2 -36.5 -100.4 -74.3 C -65.7 -112 -32.8 -145.5 -2.9 -143.2 C 27.1 -140.9 54.2 -102.9 78.3 -67.6 Z" />
      </clipPath>
        <clipPath id="path-6" transform="translate(300,300)">
        <path data-morph-to="M 53.9 -49.2 C 67.2 -40.5 73.6 -20.3 72.4 -1.2 C 71.2 17.9 62.5 35.8 49.2 83.8 C 35.8 131.8 17.9 209.9 -7.4 217.3 C -32.8 224.8 -65.5 161.5 -107.7 113.5 C -149.9 65.5 -201.4 32.8 -188.8 12.6 C -176.2 -7.5 -99.4 -15.1 -57.3 -23.8 C -15.1 -32.4 -7.5 -42.2 6.4 -48.6 C 20.3 -54.9 40.5 -57.9 53.9 -49.2 Z" class="anime" d="M 124.8 -128.3 C 130.8 -118.8 83.4 -59.4 56.8 -26.6 C 30.1 6.1 24.3 12.3 18.3 54.9 C 12.3 97.6 6.1 176.8 -7 183.7 C -20 190.7 -40.1 125.4 -63.6 82.7 C -87.1 40.1 -114 20 -122.8 -8.7 C -131.5 -37.5 -122 -75 -98.5 -84.5 C -75 -94 -37.5 -75.5 11 -86.4 C 59.4 -97.4 118.8 -137.8 124.8 -128.3 Z" />
      </clipPath>
        <clipPath id="path-7" transform="translate(300,300)">
        <path data-morph-to="M 124.8 -128.3 C 130.8 -118.8 83.4 -59.4 56.8 -26.6 C 30.1 6.1 24.3 12.3 18.3 54.9 C 12.3 97.6 6.1 176.8 -7 183.7 C -20 190.7 -40.1 125.4 -63.6 82.7 C -87.1 40.1 -114 20 -122.8 -8.7 C -131.5 -37.5 -122 -75 -98.5 -84.5 C -75 -94 -37.5 -75.5 11 -86.4 C 59.4 -97.4 118.8 -137.8 124.8 -128.3 Z" class="anime" d="M 42.7 -33.9 C 61.9 -23.6 88.5 -11.8 113.6 25.1 C 138.7 62 162.3 124 143.1 129.8 C 124 135.6 62 85.3 16.7 68.6 C -28.5 51.9 -57 68.7 -90 62.9 C -123 57 -160.5 28.5 -151 9.5 C -141.4 -9.4 -84.9 -18.9 -51.9 -29.2 C -18.9 -39.5 -9.4 -50.8 1.2 -51.9 C 11.8 -53.1 23.6 -44.2 42.7 -33.9 Z" />
      </clipPath>
    </defs>
  </svg>
</div>
<div class="defilee__outer">
  <section id="defilee" class="defilee__ctnr">
    <h1>The future will <br>either be green<br>or not at all.</h1>
    <div class="defilee__div defilee__div ">
      <svg class="item__svg" width="400px" height="400px" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice">
					<g clip-path="url(#path-1)">
						<image class="item__img" xlink:href="https://picsum.photos/1200/1200?image=481 "x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>

    <div class="defilee__div defilee__div--special">
      <svg class="item__svg" width="500px" height="500px" viewBox="0 0 600 600">
					<g clip-path="url(#path-2)" >
						<image class="item__img" xlink:href="https://picsum.photos/900/900?image=480" x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>
    <div class="defilee__div defilee__div--special1 ">
      <svg class="item__svg" width="400px" height="400px" viewBox="0 0 600 600">
					<g clip-path="url(#path-3)" >
						<image class="item__img" xlink:href="https://picsum.photos/900/900?image=476" x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>
    <div class="defilee__div defilee__div--special3 ">
      <svg class="item__svg" width="400px" height="400px" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice">
					<g clip-path="url(#path-4)">
						<image class="item__img" xlink:href="https://picsum.photos/1200/1200?image=472 "x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>
    <div class="defilee__div defilee__div--special4">
      <svg class="item__svg" width="500px" height="500px" viewBox="0 0 600 600">
					<g clip-path="url(#path-5)" >
						<image class="item__img" xlink:href="https://picsum.photos/900/900?image=89" x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>
    <div class="defilee__div defilee__div--special1 ">
      <svg class="item__svg" width="600px" height="600px" viewBox="0 0 600 600">
					<g clip-path="url(#path-6)" >
						<image class="item__img" xlink:href="https://picsum.photos/900/900?image=33" x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>
    <div class="defilee__div defilee__div--special--special3 ">
      <svg class="item__svg" width="700px" height="700px" viewBox="0 0 600 600">
					<g clip-path="url(#path-7)" >
						<image class="item__img" xlink:href="https://picsum.photos/900/900?image=94" x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>
    <div class="defilee__div defilee__div">
      <svg class="item__svg" width="500px" height="500px" viewBox="0 0 600 600">
					<g clip-path="url(#path-1)" >
						<image class="item__img" xlink:href="https://picsum.photos/900/900?image=132" x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>

    <div class="defilee__div--special2">
      <svg class="item__svg" width="400px" height="400px" viewBox="0 0 600 600">
					<g clip-path="url(#path-2)" >
						<image class="item__img" xlink:href="https://picsum.photos/900/900?image=393" x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>

    <div class="defilee__div defilee__div ">
      <svg class="item__svg" width="400px" height="400px" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice">
					<g clip-path="url(#path-4)">
						<image class="item__img" xlink:href="https://picsum.photos/1200/1200?image=468 "x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>
    <div class="defilee__div defilee__div--special">
      <svg class="item__svg" width="500px" height="500px" viewBox="0 0 600 600">
					<g clip-path="url(#path-6)" >
						<image class="item__img" xlink:href="https://picsum.photos/900/900?image=557" x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>
    <div class="defilee__div defilee__div--special4 ">
      <svg class="item__svg" width="600px" height="600px" viewBox="0 0 600 600">
					<g clip-path="url(#path-3)" >
						<image class="item__img" xlink:href="https://picsum.photos/900/900?image=560" x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>
    <div class="defilee__div defilee__div ">
      <svg class="item__svg" width="600px" height="600px" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice">
					<g clip-path="url(#path-7)">
						<image class="item__img" xlink:href="https://picsum.photos/1200/1200?image=562 "x="0" y="0" width="100%" height="100%" />
					</g>
				</svg>
    </div>
  </section>
</div>
  <script src='https://codepen.io/pehaa/pen/bzXWYq/748c16a1cef50fba90df9a485a5ef1d5.js'></script>
      <script>
anime({
  targets: '.anime',
  d: [
  { value: el => el.getAttribute('data-morph-to'), duration: (el, i) => 2000 },
  { value: el => el.getAttribute('d'), duration: (el, i, l) => 2000 }],

  loop: true,
  easing: 'linear',
  update: () => {
    const el = document.getElementById('defs');
    el.style.display = 'none';
    el.offsetWidth;
    el.style.display = 'block';
  } });


class Defilee {
  constructor(element) {
    if (!element) {
      return;
    }
    this.element = element;
    this._name = "defilee";
    this._itemSelector = "." + this._itemClass;
  }
  init() {
    this.addLoop();
  }
  addLoop() {
    const parent = this.element;
    Array.prototype.slice.call(this.element.children).reverse().forEach(el => {
      const clone = el.cloneNode(true);
      clone.classList.add('clone');
      parent.insertBefore(clone, parent.firstChild);
    });
  }}


const defilee = new Defilee(document.getElementById('defilee'));
defilee.init();
    </script>
</body>
</html>

10. Marquee-like Content Scrolling

Made by Coding Journey. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #eee;
  color: #111;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

:root {
  --marquee-width: 80vw;
  --marquee-height: 20vh;
  /* --marquee-elements: 12; */ /* defined with JavaScript */
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: #111;
  color: #eee;
  overflow: hidden;
  position: relative;
}
.marquee:before, .marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
  background: linear-gradient(to right, #111 0%, transparent 100%);
}
.marquee:after {
  right: 0;
  background: linear-gradient(to left, #111 0%, transparent 100%);
}
.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}
/* .marquee-content:hover {
  animation-play-state: paused;
} */
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  white-space: nowrap;
}

.marquee-content li img {
  width: 100%;
  /* height: 100%; */
  border: 2px solid #eee;
}

@media (max-width: 600px) {
  html { font-size: 12px; }
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }
  .marquee:before, .marquee:after { width: 5rem; }
}
</style>
</head>
<body>
  <div class="marquee">
    <ul class="marquee-content">
      <li><i class="fab fa-github"></i></li>
      <li><i class="fab fa-codepen"></i></li>
      <li><i class="fab fa-free-code-camp"></i></li>
      <li><i class="fab fa-dev"></i></li>
      <li><i class="fab fa-react"></i></li>
      <li><i class="fab fa-vuejs"></i></li>
      <li><i class="fab fa-angular"></i></li>
      <li><i class="fab fa-node"></i></li>
      <li><i class="fab fa-wordpress"></i></li>
      <li><i class="fab fa-aws"></i></li>
      <li><i class="fab fa-docker"></i></li>
      <li><i class="fab fa-android"></i></li>
    </ul>
  </div>
      <script>
const root = document.documentElement;
const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed");
const marqueeContent = document.querySelector("ul.marquee-content");

root.style.setProperty("--marquee-elements", marqueeContent.children.length);

for (let i = 0; i < marqueeElementsDisplayed; i++) {if (window.CP.shouldStopExecution(0)) break;
  marqueeContent.appendChild(marqueeContent.children[i].cloneNode(true));
}window.CP.exitedLoop(0);
    </script>
</body>
</html>

11. Js & CSS 3D Carousel Room

Made by Daniel Velasquez. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #2e2d31;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.wrapper-3d {
  position: relative;
  perspective: 250px;
  transform-style: preserve-3d;
}

.image {
  height: 175px;
  width: 300px;
}

.carousel-wrapper {
  overflow: hidden;
  width: 60vw;
  height: 80vh;
}

.carousel-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-out;
}

.slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

/* The trick is to position them on their respective side
   Then set transform-origin to that siede
   And put desired angle 
*/
.left-3d {
  position: absolute;
  transform-origin: right center;
  transform: rotateY(100deg);
  top: 0;
  bottom: 0;
  right: calc(100%);
}

#left {
  transform: translateX(0%);
}

#center {
  transform: translateX(-100%);
}

.right-3d {
  position: absolute;
  transform-origin: left center;
  transform: rotateY(-100deg);
  top: 0;
  bottom: 0;
  left: calc(100%);
}

#right {
  transform: translateX(-200%);
}

.first, .second, .third {
  background-size: cover;
}

.first {
  background-image: url("https://images.unsplash.com/photo-1492970471430-bc6bd7eb2b13?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9893bc89e46e2b77a5d8c091fbba04e9&auto=format&fit=crop&w=1355&q=80");
}

.second {
  background-image: url("https://images.unsplash.com/photo-1501707305551-9b2adda5e527?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0cf5887247e17503ce4e542d00d86b9d&auto=format&fit=crop&w=1335&q=80");
  background-position-y: 50%;
}

.third {
  background-image: url("https://images.unsplash.com/photo-1496749843252-699a989877a1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fe5da9650707e5a93c8c3cf164c2e74b&auto=format&fit=crop&w=1375&q=80");
  background-position-y: 50%;
}

.debug {
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 1.1em;
  font-family: sans-serif;
  letter-spacing: 0.1em;
  font-weight: 200;
  margin: 0;
  margin-top: 10px;
  color: #fafafaee;
}
.debug-top {
  top: 2vh;
}
.debug-bot {
  bottom: 2vh;
}

.fa {
  font-size: 15rem;
  color: #fafafa99;
  line-height: 20px;
}

@media only screen and (min-width: 1600px) {
  .right-3d {
    transform: none;
    transform: rotateY(-120deg);
  }

  .left-3d {
    transform: none;
    transform: rotateY(120deg);
  }
}
</style>
</head>
<body>
  <div class='wrapper' id='wrapper'>
  <div class='wrapper-3d'>
    <div class='carousel-wrapper center-3d'>
      <div class='carousel-container' id='center'>
        <div class='slide first'></div>
        <div class='slide second'></div>
        <div class='slide third'></div>
      </div>
      <div class='first image' id='img'></div>
    </div>
    <div class='carousel-wrapper left-3d center-3d'>
      <div class='carousel-container' id='left'>
        <div class='slide first'></div>
        <div class='slide second'></div>
        <div class='slide third'></div>
      </div>
    </div>
    <div class='carousel-wrapper right-3d center-3d'>
      <div class='carousel-container' id='right'>
        <div class='slide first'></div>
        <div class='slide second'></div>
        <div class='slide third'></div>
      </div>
    </div>
  </div>
</div>

<p class='debug debug-top' id='t'>0</p>
<p class='debug debug-bot'>
  <br/>
   Move your mouse horizontally
</p>
      <script>
const padding = 200;
const slidesCount = 3 - 1;
function map(x, in_min, in_max, out_min, out_max)
{
  return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
document.addEventListener('mousemove', e => {
  // Change to bodywidth
  const wrapper = document.getElementById('wrapper');
  const rect = wrapper.getBoundingClientRect();
  // Mouse position in between padding
  const mouseX = Math.min(Math.max(e.clientX - padding, 0), rect.width - padding * 2);
  const rawPercent = map(mouseX, 0, rect.width - padding * 2, 100 - 100 * slidesCount, 100);
  const percent = Math.round(rawPercent);
  const left = document.getElementById('left');
  const center = document.getElementById('center');
  const right = document.getElementById('right');
  left.style.transform = `translateX(${percent}%)`;
  center.style.transform = `translateX(${percent - 100}%)`;
  right.style.transform = `translateX(${percent - 200}%)`;
  //debug
  const paragraph = document.getElementById('t');
  paragraph.innerHTML = percent;
});
    </script>
</body>
</html>