10+ JavaScript Responsive Slider Examples

This post contains a total of 10+ Hand-Picked JavaScript Responsive Slider Examples with Source Code. All these Responsive Sliders are made using JavaScript and Styled using CSS.

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

Related Posts

JavaScript Responsive Slider Examples

1. By Ivor Padilla

Made by Ivor Padilla. Full width JavaScript Responsive Slider with 3 cells. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css'>
<link rel='stylesheet' href='https://npmcdn.com/[email protected]/dist/flickity.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
  
<style>
.carousel {
  background: #EEE;
  padding: 1px;
}

.carousel-cell {
  position: relative;
  height: 550px;
  width: 33.3333%;
  margin-right: 2px;
}
.carousel-cell .carousel-content {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: flex-end;
  color: white;
}
.carousel-cell .carousel-content .carousel-meta {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
  padding: 120px 20px 40px 20px;
}
.carousel-cell .carousel-content h3 {
  color: white;
}
</style>
</head>
<body>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
<div class="main-carousel">
  <div class="carousel-cell">
    <div class="carousel-content" style="background-image: url('https://placeimg.com/640/550/any');">
      <div class="carousel-meta">
        <h3>From Wetlands To Canals And Dams Amsterdam Is Alive</h3>
        <span><i class="fa fa-clock-o" aria-hidden="true"></i> January 7, 2013 </span>
      </div>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="carousel-content" style="background-image: url('https://placeimg.com/640/550/arch');">
      <div class="carousel-meta">
        <h3>From Wetlands To Canals And Dams Amsterdam Is Alive</h3>
        <span><i class="fa fa-clock-o" aria-hidden="true"></i> January 7, 2013 </span>
      </div>
    </div>
  </div> 
  <div class="carousel-cell">
    <div class="carousel-content" style="background-image: url('https://placeimg.com/640/550/nature');">
      <div class="carousel-meta">
        <h3>From Wetlands To Canals And Dams Amsterdam Is Alive</h3>
        <span><i class="fa fa-clock-o" aria-hidden="true"></i> January 7, 2013 </span>
      </div>
    </div>
  </div>
  <div class="carousel-cell">
<div class="carousel-content" style="background-image: url('https://placeimg.com/640/550/animals');">
      <div class="carousel-meta">
        <h3>From Wetlands To Canals And Dams Amsterdam Is Alive</h3>
        <span><i class="fa fa-clock-o" aria-hidden="true"></i> January 7, 2013 </span>
      </div>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="carousel-content" style="background-image: url('https://placeimg.com/640/550/arch');">
      <div class="carousel-meta">
        <h3>From Wetlands To Canals And Dams Amsterdam Is Alive</h3>
        <span><i class="fa fa-clock-o" aria-hidden="true"></i> January 7, 2013 </span>
      </div>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="carousel-content" style="background-image: url('https://placeimg.com/640/550/arch');">
      <div class="carousel-meta">
        <h3>From Wetlands To Canals And Dams Amsterdam Is Alive</h3>
        <span><i class="fa fa-clock-o" aria-hidden="true"></i> January 7, 2013 </span>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.5/flickity.pkgd.min.js'></script>
      <script>
var $carousel = $('.main-carousel').flickity({
  imagesLoaded: true,
  contain: true,
  percentPosition: true,
  initialIndex: 2,
  wrapAround: true });
//# sourceURL=pen.js
    </script>
</body>
</html>

2. By Syahrizal

Made by Syahrizal. Responsive Slider / Carousel with Swiper.js. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Syahrizaldev">
  
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #252a32;
  background: #ffffff;
}

.container {
  max-width: 75rem;
  width: 100%;
  padding: 4rem 2rem;
  margin: 0 auto;
}

.main .container .swiper-container .swiper-wrapper .swiper-slide .card-image {
  background: #ffffff;
  border: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
  border-radius: 2px;
}
.main .container .swiper-container .swiper-wrapper .swiper-slide .card-image img {
  display: block;
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.main .container .swiper-container .swiper-pagination-bullet {
  opacity: 0.8;
  background: #252a32;
}
.main .container .swiper-container .swiper-pagination-bullet-active {
  background: #ffffff;
}
.main .container .swiper-container .swiper-button-next,
.main .container .swiper-container .swiper-button-prev {
  background-image: none;
  background-size: 0;
  background-repeat: no-repeat;
  background-position: 0;
  margin-top: -1rem;
}
.main .container .swiper-container .swiper-button-next .arrow-icon,
.main .container .swiper-container .swiper-button-prev .arrow-icon {
  font-size: 2rem;
  color: #ffffff;
}
</style>
</head>
<body>
  <main class="main">
  <div class="container">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="card-image">
            <img src="https://source.unsplash.com/1280x720/?nature" alt="Image Slider">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="card-image">
            <img src="https://source.unsplash.com/1280x720/?nature,water,animal" alt="Image Slider">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="card-image">
            <img src="https://source.unsplash.com/1280x720/?water" alt="Image Slider">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="card-image">
            <img src="https://source.unsplash.com/1280x720/?animal" alt="Image Slider">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="card-image">
            <img src="https://source.unsplash.com/1280x720/?travel" alt="Image Slider">
          </div>
        </div>
        <div class="swiper-slide">
          <div class="card-image">
            <img src="https://source.unsplash.com/1280x720/?flower" alt="Image Slider">
          </div>
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
      <!-- Add Scrollbar -->
      <div class="swiper-button-next">
        <i class="fas fa-chevron-circle-right arrow-icon"></i>
      </div>
      <div class="swiper-button-prev">
        <i class="fas fa-chevron-circle-left arrow-icon"></i>
      </div>
    </div>
  </div>
</main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js'></script>
      <script>
// Swiper Configuration
var swiper = new Swiper(".swiper-container", {
  slidesPerView: 1.5,
  spaceBetween: 10,
  centeredSlides: true,
  freeMode: true,
  grabCursor: true,
  loop: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true },

  autoplay: {
    delay: 4000,
    disableOnInteraction: false },

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev" },

  breakpoints: {
    500: {
      slidesPerView: 1 },

    700: {
      slidesPerView: 1.5 } } });
//# sourceURL=pen.js
    </script>
</body>
</html>

3. By mrnobody

Made by mrnobody. Responsive Touch Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.min.css'>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  background-color: #212121;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 320px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 8px;
}

.picture {
  width: 320px;
  height: 320px;
  overflow: hidden;
}
.picture img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.detail {
  padding: 25px 20px;
  font-weight: 600;
  text-align: center;
}
.detail h3 {
  margin: 0;
  font-size: 20px;
}
.detail span {
  display: block;
  font-size: 16px;
  color: #f44336;
}
</style>
</head>
<body>
  <!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
      <div class="picture">
        <img src="https://images.unsplash.com/photo-1464863979621-258859e62245?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6b4e41a670c097c8fd2834579f5d5958&auto=format&fit=crop&w=633&q=80" alt="">
      </div>
      <div class="detail">
        <h3>Marie Edwards</h3>
        <span>Web Designer</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="picture">
        <img src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=49899e285952107fdfd9415b8d3bf74a&auto=format&fit=crop&w=634&q=80" alt="">
      </div>
      <div class="detail">
        <h3>Kelly Woods</h3>
        <span>Web Designer</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="picture">
        <img src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-0.3.5&s=739aef35459daa8aaeaa55363d492bc1&auto=format&fit=crop&w=673&q=80" alt="">
      </div>
      <div class="detail">
        <h3>Roger Rice</h3>
        <span>Web Designer</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="picture">
        <img src="https://images.unsplash.com/photo-1502768040783-423da5fd5fa0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0c6416353c255d2746a68c8a83943bdf&auto=format&fit=crop&w=634&q=80" alt="">
      </div>
      <div class="detail">
        <h3>Jessica Garcia</h3>
        <span>Web Designer</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="picture">
        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9a138cf8acd85036bd292d7f10074e79&auto=format&fit=crop&w=634&q=80" alt="">
      </div>
      <div class="detail">
        <h3>Sean Adams</h3>
        <span>Web Designer</span>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="picture">
        <img src="https://images.unsplash.com/photo-1500080209535-717dd4ebaa6b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ddee81e2e574e8190b07139ddb0f1938&auto=format&fit=crop&w=687&q=80" alt="">
      </div>
      <div class="detail">
        <h3>Crystal Davidson</h3>
        <span>Web Designer</span>
      </div>
    </div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <!--     <div class="swiper-button-prev"></div> -->
  <!--     <div class="swiper-button-next"></div> -->

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.min.js'></script>
      <script>
var swiper = new Swiper(".swiper-container", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 20,
    stretch: 0,
    depth: 350,
    modifier: 1,
    slideShadows: true },

  pagination: {
    el: ".swiper-pagination" } });

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

4. By Ricardo Oliva Alonso

Made by Ricardo Oliva Alonso. JavaScript Responsive Vertical Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" rel="stylesheet">
  <link rel='stylesheet' href='https://github.com/ricardoolivaalonso/recursos/blob/master/ss/GothamPro-Bold.ttf'>
<style>
@font-face {
  font-family: "Gotham";
  src: url("https://rawcdn.githack.com/ricardoolivaalonso/recursos/ed9402da7be274e29dcac2ff9a0680ba6bf1ab27/ss/GothamPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
/**/
/**/
/**/
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/**/
html, body {
  font-family: "Montserrat", sans-serif;
  font-family: "Gotham", sans-serif, Verdana;
  font-weight: 700;
  font-display: block;
  font-size: 12px;
  text-rendering: optimizeSpeed;
  background: #820011;
  color: #F7F7F7;
  user-select: none;
  overflow-x: hidden;
}

h1,
h2 {
  position: relative;
  font-size: 36px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}
@media (min-width: 768px) {
  h1,
h2 {
    font-size: 50px;
  }
}
@media (min-width: 1024px) {
  h1,
h2 {
    font-size: 60px;
  }
}

h2 {
  letter-spacing: -2px;
}

/**/
.particles {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
}
.particles::before {
  content: "";
  position: absolute;
  top: 0;
  width: 75px;
  height: 100%;
  background: rgba(49, 0, 130, 0.175);
  animation: bg-l 10s ease-in-out infinite alternate;
}
@media (min-width: 768px) {
  .particles::before {
    width: 100px;
    background: rgba(49, 0, 130, 0.1);
  }
}
@media (min-width: 1024px) {
  .particles::before {
    width: 125px;
  }
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: #F7F7F7;
  filter: blur(1px);
}

.control {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  position: fixed;
  right: 0;
  bottom: 40px;
  width: 100%;
  height: auto;
  z-index: 1000;
}
@media (min-width: 768px) {
  .control {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    position: absolute;
    width: auto;
    height: 160px;
    right: 80px;
    bottom: calc(50% - 80px);
  }
}
.control__item {
  width: 10px;
  height: 10px;
  margin-left: 20px;
  border-radius: 50%;
  opacity: 0.4;
  background: #F7F7F7;
  transition: 0.45s ease;
  cursor: pointer;
}
.control__item:hover {
  opacity: 0.6;
}
@media (min-width: 768px) {
  .control__item {
    width: 8px;
    height: 8px;
    margin-top: 12px;
    margin-left: 0;
  }
}

.background {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  position: absolute;
  width: 0;
  height: 0;
  top: -100%;
  left: 0%;
  transition: 0.6s ease-in;
  visibility: hidden;
  opacity: 1;
}

.header {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100vmax;
  top: 0;
  left: 0;
  background-color: #820011;
  background-image: url("https://github.com/ricardoolivaalonso/recursos/blob/master/ss/0.jpg?raw=true");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
  visibility: visible;
  opacity: 1;
  animation: zoom 10s ease infinite;
}
@media (min-width: 768px) {
  .header {
    height: 100vh;
    min-height: 500px;
  }
}

/**/
.header__logo {
  position: absolute;
  height: 25px;
  width: 25px;
  object-fit: contain;
  margin: 30px;
  z-index: 10000;
}
@media (min-width: 768px) {
  .header__logo {
    margin: 40px 80px;
  }
}
.header__info {
  position: absolute;
  left: 30px;
  top: 45%;
}
@media (min-width: 768px) {
  .header__info {
    top: 40%;
    left: 92px;
  }
}

.portfolio__item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100vmax;
  padding: 30px;
  background-color: #820011;
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  animation: zoom 10s ease infinite;
}
.portfolio__item:nth-of-type(3) {
  background-image: url("https://github.com/ricardoolivaalonso/recursos/blob/master/ss/1.jpg?raw=true");
}
.portfolio__item:nth-of-type(4) {
  background-image: url("https://github.com/ricardoolivaalonso/recursos/blob/master/ss/2.jpg?raw=true");
}
.portfolio__item:nth-of-type(5) {
  background-image: url("https://github.com/ricardoolivaalonso/recursos/blob/master/ss/3.jpg?raw=true");
}
.portfolio__item:nth-of-type(6) {
  background-image: url("https://github.com/ricardoolivaalonso/recursos/blob/master/ss/4.jpg?raw=true");
}
.portfolio__item:nth-of-type(7) {
  background-image: url("https://github.com/ricardoolivaalonso/recursos/blob/master/ss/5.jpg?raw=true");
}
.portfolio__item:nth-of-type(8) {
  background-image: url("https://github.com/ricardoolivaalonso/recursos/blob/master/ss/6.jpg?raw=true");
}
@media (min-width: 768px) {
  .portfolio__item {
    height: 100vh;
    min-height: 520px;
    padding: 40px 80px;
  }
}
.portfolio__left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  width: auto;
  height: 100%;
  position: relative;
}
.portfolio__info {
  width: 100%;
  max-width: 450px;
  margin-bottom: 20px;
  line-height: 1.6;
  letter-spacing: -0.4px;
}

/**/
/*Estados*/
.is-active {
  transform: scale(1.3);
  opacity: 1;
  background: #F7F7F7;
}

.bg-active {
  width: 100%;
  height: 100vmax;
  top: 0%;
  left: 0%;
  visibility: visible;
  opacity: 1;
  transition: 0.6s ease-in;
}
@media (min-width: 768px) {
  .bg-active {
    height: 100vh;
  }
}

.menu-active {
  transform: translateY(0vh);
  transition: 0.5s ease;
}

@keyframes move {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10%, 90% {
    opacity: 0.1;
  }
  100% {
    transform: translateX(45vw);
    opacity: 0;
  }
}
@keyframes bg-l {
  0% {
    left: 10%;
  }
  25% {
    left: 12%;
  }
  70% {
    left: 15%;
  }
  100% {
    left: 20%;
  }
}
@keyframes zoom {
  0%, 30.5%, 31.5%, 32.5%, 34%, 100% {
    background-color: #820011;
    background-position: center center;
  }
  31%, 32%, 33% {
    background-color: #310082;
    background-position: right bottom;
  }
}
</style>
</head>
<body>
  <div class="main" id="main">
  <div class="particles" id="particles"></div>
  <div class="control"><a class="control__item is-active" id="link-0"></a><a class="control__item" id="link-1"></a><a class="control__item" id="link-2"></a><a class="control__item" id="link-3"></a><a class="control__item" id="link-4"></a><a class="control__item" id="link-5"></a><a class="control__item" id="link-6"></a></div>
  <header class="header background" id="header"><img class="header__logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBB%0D%0AZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9u%0D%0AOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBT%0D%0AVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzEx%0D%0ALmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cu%0D%0AdzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGlu%0D%0AayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9%0D%0AIjAgMCAzMCAzMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzAgMzAiIHhtbDpzcGFjZT0i%0D%0AcHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0Y3RjdGNyIgZD0iTTAsMHYzMGgzMFYwSDB6IE03Ljgz%0D%0AOSw0LjI0Mmw2LjEyMy0wLjAxNWMwLjU1NC0wLjAwMSwxLjM4OSwwLjIyMywxLjg2NiwwLjQ5N2w2%0D%0ALjQ1MywzLjcxNA0KCWMwLjQ3NCwwLjI3NSwwLjg2NCwwLjk0OSwwLjg2MSwxLjVsLTAuMDA4LDIu%0D%0ANzEyYy0wLjAwMywwLjU1MS0wLjM5MywwLjc3My0wLjg3LDAuNUw3LjcwNCw0Ljc0NA0KCUM3LjIy%0D%0ANyw0LjQ3LDcuMjg4LDQuMjQ0LDcuODM5LDQuMjQyeiBNMjIuMTUsMjUuNzcybC02LjE2NS0wLjAw%0D%0AM2MtMC41NTQsMC0xLjM5Mi0wLjIyNy0xLjg2Ni0wLjUwM2wtNi4zOTQtMy43MTINCgljLTAuNDc1%0D%0ALTAuMjc2LTAuODY1LTAuOTU0LTAuODY1LTEuNTAydi0yLjY4NGMwLTAuNTUxLDAuMzktMC43NzUs%0D%0AMC44NjUtMC41bDE0LjU2LDguNDA1QzIyLjc2LDI1LjU1MSwyMi43MDEsMjUuNzcyLDIyLjE1LDI1%0D%0ALjc3MnoNCgkgTTIyLjI2NywyMC42NTZsLTIuMzMsMS4zNTdjLTAuNDc1LDAuMjc5LTEuMjUyLDAu%0D%0AMjc5LTEuNzI5LDAuMDA1bC0xMC40ODItNi4wNWMtMC40NzUtMC4yNzUtMC44NjctMC45NS0wLjg3%0D%0ALTEuNWwtMC4wMTMtMi43MjENCgljMC0wLjU1MSwwLjM4NS0wLjc3NSwwLjg2Mi0wLjUwMWwxNC41%0D%0ANiw4LjQwNkMyMi43NDEsMTkuOTI2LDIyLjc0MSwyMC4zOCwyMi4yNjcsMjAuNjU2eiBNMjMuMTUy%0D%0ALDE4LjI1OA0KCWMwLDAuNTUxLTAuMzkzLDAuNzc3LTAuODcsMC41MDFMNy43MDQsMTAuMzQ3Yy0w%0D%0ALjQ3Ny0wLjI3NC0wLjQ3Ny0wLjcyNSwwLTAuOTk5bDIuMzQxLTEuMzUyYzAuNDc3LTAuMjc0LDEu%0D%0AMjU3LTAuMjc0LDEuNzMxLDANCglsMTAuNTIsNi4wNzhjMC40NzcsMC4yNzYsMC44NjQsMC45NTEs%0D%0AMC44NjEsMS41MDFMMjMuMTUyLDE4LjI1OHoiLz4NCjwvc3ZnPg0K" alt="Ícono de roa"/>
    <div class="header__info">
      <h1 class="header__title">STRANGER <br>THINGS</h1>
    </div>
  </header>
  <div class="portfolio__item background">
    <div class="portfolio__left">
      <h2 class="portfolio__title">Eleven</h2>
      <p class="portfolio__info">Lorem</p>
    </div>
  </div>
  <div class="portfolio__item background">
    <div class="portfolio__left">
      <h2 class="portfolio__title">Mike Wheeler</h2>
      <p class="portfolio__info">Lorem</p>
    </div>
  </div>
  <div class="portfolio__item background">
    <div class="portfolio__left">
      <h2 class="portfolio__title">Will Byers</h2>
      <p class="portfolio__info">Lorem</p>
    </div>
  </div>
  <div class="portfolio__item background">
    <div class="portfolio__left">
      <h2 class="portfolio__title">Joyce Byers</h2>
      <p class="portfolio__info">Lorem.</p>
    </div>
  </div>
  <div class="portfolio__item background">
    <div class="portfolio__left">
      <h2 class="portfolio__title">Jim Hopper</h2>
      <p class="portfolio__info">Lorem</p>
    </div>
  </div>
  <div class="portfolio__item background">
    <div class="portfolio__left">
      <h2 class="portfolio__title">Demogorgon</h2>
      <p class="portfolio__info">Lorem</p>
    </div>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

      <script>
/*Variables*/
var container = document.body;
var con = 0;
var link = document.getElementsByClassName("control__item");
var b = document.getElementsByClassName("background");
var particles = document.getElementById("particles");

/*Funciones*/
function createParticle(event) {
  var np = document.documentElement.clientWidth / 40;
  particles.innerHTML = "";
  for (var i = 0; i < np; i++) {if (window.CP.shouldStopExecution(0)) break;
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    var rndw = Math.floor(Math.random() * w) + 1;
    var rndh = Math.floor(Math.random() * h) + 1;
    var widthpt = Math.floor(Math.random() * 6) + 3;
    var opty = Math.floor(Math.random() * 5) + 2;
    var anima = Math.floor(Math.random() * 12) + 8;

    var div = document.createElement("div");
    div.classList.add("particle");
    div.style.marginLeft = rndw + "px";
    div.style.marginTop = rndh + "px";
    div.style.width = widthpt + "px";
    div.style.height = widthpt + "px";
    div.style.opacity = opty;
    div.style.animation = "move " + anima + "s ease-in infinite ";
    particles.appendChild(div);
  }window.CP.exitedLoop(0);
}
function removeBg(event) {
  for (var i = 0; i < b.length; i++) {if (window.CP.shouldStopExecution(1)) break;
    b[i].classList.remove("bg-active");
  }window.CP.exitedLoop(1);
}
function getActive(event) {
  for (var i = 0; i < link.length; i++) {if (window.CP.shouldStopExecution(2)) break;
    link[i].classList.remove("is-active");
  }window.CP.exitedLoop(2);
}
function getBg(event) {
  var id = this.id.split("link-").join("");
  getActive();
  this.classList.add("is-active");
  removeBg();
  b[id].classList.add("bg-active");
  con = id;
}
function myWheel() {
  var y = event.deltaY;
  var x = event.keyCode;

  if (y > 0 || x == 40) {
    if (con < 6) {
      con++;
      removeBg();
      b[con].classList.add("bg-active");
      getActive();
      link[con].classList.add("is-active");
    }
  }
  if (y < 0 || x == 38) {
    if (con > 0) {
      con--;
      removeBg();
      b[con].classList.add("bg-active");
      getActive();
      link[con].classList.add("is-active");
    }
  }
}
/*Main function*/
function main(event) {
  for (var i = 0; i < link.length; i++) {if (window.CP.shouldStopExecution(3)) break;
    link[i].addEventListener("click", getBg);
  }window.CP.exitedLoop(3);
  createParticle();
}
/*Listener*/
window.addEventListener("resize", createParticle);
window.addEventListener("load", main);
container.addEventListener("wheel", myWheel);
container.addEventListener("keydown", myWheel);
    </script>
</body>
</html>

5. By Yudiz

Made by Yudiz. Expandable Animated Card Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css'> 
<style>
@charset "utf-8";

/******* Fonts Import Start **********/
@import url("https://fonts.googleapis.com/css2?family=Roboto:[email protected];700&display=swap");
/********* Fonts Face CSS End **********/

/******* Common Element CSS Start ******/
* {
  margin: 0px;
  padding: 0px;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}
.clear {
  clear: both;
}
img {
  max-width: 100%;
  border: 0px;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
  outline: none;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
a:focus,
a:active,
a:visited,
a:hover {
  text-decoration: none;
  outline: none;
}
a:hover {
  color: #e73700;
}
h2 {
  margin-bottom: 48px;
  padding-bottom: 16px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  position: relative;
  text-transform: capitalize;
}
h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 36px;
}
/******* Common Element CSS End *********/

/* -------- title style ------- */
.line-title {
  position: relative;
  width: 400px;
}
.line-title::before,
.line-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  border-radius: 2px;
}
.line-title::before {
  width: 100%;
  background: #f2f2f2;
}
.line-title::after {
  width: 32px;
  background: #e73700;
}

/******* Middle section CSS Start ******/
/* -------- Landing page ------- */
.game-section {
  padding: 60px 50px;
}
.game-section .owl-stage {
  margin: 15px 0;
  display: flex;
  display: -webkit-flex;
}
.game-section .item {
  margin: 0 15px 60px;
  width: 320px;
  height: 400px;
  display: flex;
  display: -webkit-flex;
  align-items: flex-end;
  -webkit-align-items: flex-end;
  background: #343434 no-repeat center center / cover;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.game-section .item.active {
  width: 500px;
  box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);
}
.game-section .item:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}
.game-section .item-desc {
  padding: 0 24px 12px;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transform: translateY(calc(100% - 54px));
  -webkit-transform: translateY(calc(100% - 54px));
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
.game-section .item.active .item-desc {
  transform: none;
  -webkit-transform: none;
}
.game-section .item-desc p {
  opacity: 0;
  -webkit-transform: translateY(32px);
  transform: translateY(32px);
  transition: all 0.4s ease-in-out 0.2s;
  -webkit-transition: all 0.4s ease-in-out 0.2s;
}
.game-section .item.active .item-desc p {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.game-section .owl-theme.custom-carousel .owl-dots {
  margin-top: -20px;
  position: relative;
  z-index: 5;
}
/******** Middle section CSS End *******/

/***** responsive css Start ******/

@media (min-width: 992px) and (max-width: 1199px) {
  h2 {
    margin-bottom: 32px;
  }
  h3 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 32px;
  }

  /* -------- Landing page ------- */
  .game-section {
    padding: 50px 30px;
  }
  .game-section .item {
    margin: 0 12px 60px;
    width: 260px;
    height: 360px;
  }
  .game-section .item.active {
    width: 400px;
  }
  .game-section .item-desc {
    transform: translateY(calc(100% - 46px));
    -webkit-transform: translateY(calc(100% - 46px));
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  h2 {
    margin-bottom: 32px;
  }
  h3 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 32px;
  }
  .line-title {
    width: 330px;
  }

  /* -------- Landing page ------- */
  .game-section {
    padding: 50px 30px 40px;
  }
  .game-section .item {
    margin: 0 12px 60px;
    width: 240px;
    height: 330px;
  }
  .game-section .item.active {
    width: 360px;
  }
  .game-section .item-desc {
    transform: translateY(calc(100% - 42px));
    -webkit-transform: translateY(calc(100% - 42px));
  }
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
  h2 {
    margin-bottom: 20px;
  }
  h3 {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 24px;
  }
  .line-title {
    width: 250px;
  }

  /* -------- Landing page ------- */
  .game-section {
    padding: 30px 15px 20px;
  }
  .game-section .item {
    margin: 0 10px 40px;
    width: 200px;
    height: 280px;
  }
  .game-section .item.active {
    width: 270px;
    box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);
  }
  .game-section .item-desc {
    padding: 0 14px 5px;
    transform: translateY(calc(100% - 42px));
    -webkit-transform: translateY(calc(100% - 42px));
  }
}
</style>
</head>
<body>
  <section class="game-section">
  <h2 class="line-title">trending games</h2>
  <div class="owl-carousel custom-carousel owl-theme">
    <div class="item active" style="background-image: url(https://ucarecdn.com/75d7700d-c102-40ff-9ba1-f0641444c616/dota2.jpg);">
      <div class="item-desc">
        <h3>Dota 2</h3>
        <p>Dota 2 is a multiplayer online battle arena by Valve. The game is a sequel to Defense of the
          Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>
      </div>
    </div>
    <div class="item" style="background-image: url(https://ucarecdn.com/2a5f69bc-befa-49f4-acc6-ab1dcae514c7/winter3.jpg);">
      <div class="item-desc">
        <h3>The Witcher 3</h3>
        <p>The Witcher 3 is a multiplayer online battle arena by Valve. The game is a sequel to Defense
          of the Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>
      </div>
    </div>
    <div class="item" style="background-image: url(https://ucarecdn.com/ec1918b1-2674-452c-bf61-8f73d8cc40c6/rdr2.jpg);">
      <div class="item-desc">
        <h3>RDR 2</h3>
        <p>RDR 2 is a multiplayer online battle arena by Valve. The game is a sequel to Defense of the
          Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>
      </div>
    </div>
    <div class="item" style="background-image: url(https://ucarecdn.com/6ba9052d-6105-4491-917b-e1a65b68f920/pubg.jpg);">
      <div class="item-desc">
        <h3>PUBG Mobile</h3>
        <p>PUBG 2 is a multiplayer online battle arena by Valve. The game is a sequel to Defense of the
          Ancients, which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>
      </div>
    </div>
    <div class="item" style="background-image: url(https://ucarecdn.com/77598be3-c67f-40de-83d3-71a0f2f76c56/fortnite.jpg);">
      <div class="item-desc">
        <h3>Fortnite</h3>
        <p>Battle royale where 100 players fight to be the last person standing. which was a community-created mod
          for Blizzard Entertainment's Warcraft III.</p>
      </div>
    </div>
    <div class="item" style="background-image: url(https://ucarecdn.com/ed548880-32e4-42af-9d4e-632623903256/farcry5.jpg);">
      <div class="item-desc">
        <h3>Far Cry 5</h3>
        <p>Far Cry 5 is a 2018 first-person shooter game developed by Ubisoft.
          which was a community-created mod for Blizzard Entertainment's Warcraft III.</p>
      </div>
    </div>
  </div>
  </div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
      <script>
$(".custom-carousel").owlCarousel({
  autoWidth: true,
  loop: true });

$(document).ready(function () {
  $(".custom-carousel .item").click(function () {
    $(".custom-carousel .item").not($(this)).removeClass("active");
    $(this).toggleClass("active");
  });
});
    </script>
</body>
</html>

6. By Syahrizal

Another Responsive Slider by Syahrizal. This is made using Glider.js. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Syahrizaldev">
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/glider.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'> 
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4;
  background: #ffffff;
  color: #454545;
}

.container {
  padding: 4rem 2rem;
  margin: 0 auto;
  max-width: 75rem;
  width: 90%;
}

.main .container .glider-contain .glider .card-image {
  margin-right: 0.5rem;
  background: #ffffff;
  border: none;
  outline: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 2px;
}
.main .container .glider-contain .glider .card-image img {
  display: block;
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.main .container .glider-contain .glider-prev,
.main .container .glider-contain .glider-next {
  font-size: 1.5rem;
  background: #454545;
  color: #ffffff;
  margin-top: 1rem;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  border-radius: 50%;
}
.main .container .glider-contain .glider-prev .fas,
.main .container .glider-contain .glider-next .fas {
  margin-left: 1rem;
}

@media only screen and (max-width: 768px) {
  .main .glider-contain .glider-prev,
.main .glider-contain .glider-next {
    display: none;
  }
}
@media only screen and (min-width: 769px) {
  .main .glider-contain .dots {
    display: none;
  }
}
</style>
</head>
<body>
  <main class="main">
  <div class="container">
    <div class="glider-contain">
      <div class="glider">
        <div class="card-image">
          <img src="https://source.unsplash.com/1280x720/?animal" alt="Slider Image">
        </div>
        <div class="card-image">
          <img src="https://source.unsplash.com/1280x720/?nature" alt="Slider Image">
        </div>
        <div class="card-image">
          <img src="https://source.unsplash.com/1280x720/?mountain" alt="Slider Image">
        </div>
        <div class="card-image">
          <img src="https://source.unsplash.com/1280x720/?sport" alt="Slider Image">
        </div>
        <div class="card-image">
          <img src="https://source.unsplash.com/1280x720/?human" alt="Slider Image">
        </div>
        <div class="card-image">
          <img src="https://source.unsplash.com/1280x720/?building" alt="Slider Image">
        </div>
        <div class="card-image">
          <img src="https://source.unsplash.com/1280x720/?food" alt="Slider Image">
        </div>
        <div class="card-image">
          <img src="https://source.unsplash.com/1280x720/?beach" alt="Slider Image">
        </div>
      </div>
      <span role="button" aria-label="Previous" class="glider-prev"><i class="fas fa-chevron-left"></i></span>
      <span role="button" aria-label="Next" class="glider-next"><i class="fas fa-chevron-right"></i></span>
      <span role="tablist" class="dots"></span>
    </div>
  </div>
</main>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/glider.min.js'></script>
      <script>
// Glider Configuration
new Glider(document.querySelector(".glider"), {
  slidesToShow: 1.5,
  slidesToScroll: 1,
  draggable: true,
  dots: ".dots",
  responsive: [
  {
    // If Screen Size More than 768px
    breakpoint: 768,
    settings: {
      slidesToShow: 1.5,
      slidesToScroll: 1,
      duration: 0.5,
      arrows: {
        prev: ".glider-prev",
        next: ".glider-next" } } },
  {
    // If Screen Size More than 1024px
    breakpoint: 1024,
    settings: {
      slidesToShow: 2.5,
      slidesToScroll: 1,
      duration: 0.5,
      arrows: {
        prev: ".glider-prev",
        next: ".glider-next" } } }] });
    </script>
</body>
</html>
 

7. By Bruno Carvalho

Made by Bruno Carvalho. Responsive slider timeline with Swiper. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800'>
<style>
html,
body,
.container {
  height: 100%;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  flex-direction: column;
}

.title {
  font-size: 38px;
  color: #616161;
  font-style: italic;
  font-weight: 800;
}

.timeline {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.2);
}
.timeline .swiper-container {
  height: 600px;
  width: 100%;
  position: relative;
}
.timeline .swiper-wrapper {
  transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}
.timeline .swiper-slide {
  position: relative;
  color: #fff;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.timeline .swiper-slide::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -115%;
  bottom: -10%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, 0.7);
  border-radius: 100%;
}
.timeline .swiper-slide-content {
  position: absolute;
  text-align: center;
  width: 80%;
  max-width: 310px;
  right: 50%;
  top: 13%;
  transform: translate(50%, 0);
  font-size: 12px;
  z-index: 2;
}
.timeline .swiper-slide .timeline-year {
  display: block;
  font-style: italic;
  font-size: 42px;
  margin-bottom: 50px;
  transform: translate3d(20px, 0, 0);
  color: #d4a024;
  font-weight: 300;
  opacity: 0;
  transition: 0.2s ease 0.4s;
}
.timeline .swiper-slide .timeline-title {
  font-weight: 800;
  font-size: 34px;
  margin: 0 0 30px;
  opacity: 0;
  transform: translate3d(20px, 0, 0);
  transition: 0.2s ease 0.5s;
}
.timeline .swiper-slide .timeline-text {
  line-height: 1.5;
  opacity: 0;
  transform: translate3d(20px, 0, 0);
  transition: 0.2s ease 0.6s;
}
.timeline .swiper-slide-active .timeline-year {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: 0.4s ease 1.6s;
}
.timeline .swiper-slide-active .timeline-title {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: 0.4s ease 1.7s;
}
.timeline .swiper-slide-active .timeline-text {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: 0.4s ease 1.8s;
}
.timeline .swiper-pagination {
  right: 15% !important;
  height: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  z-index: 1;
}
.timeline .swiper-pagination::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}
.timeline .swiper-pagination-bullet {
  width: auto;
  height: auto;
  text-align: center;
  opacity: 1;
  background: transparent;
  color: #d4a024;
  margin: 15px 0 !important;
  position: relative;
}
.timeline .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -32.5px;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: #d4a024;
  transform: scale(0);
  transition: 0.2s;
}
.timeline .swiper-pagination-bullet-active {
  color: #d4a024;
}
.timeline .swiper-pagination-bullet-active::before {
  transform: scale(1);
}
.timeline .swiper-button-next,
.timeline .swiper-button-prev {
  background-size: 20px 20px;
  top: 15%;
  width: 20px;
  height: 20px;
  margin-top: 0;
  z-index: 2;
  transition: 0.2s;
}
.timeline .swiper-button-prev {
  left: 8%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
}
.timeline .swiper-button-prev:hover {
  transform: translateX(-3px);
}
.timeline .swiper-button-next {
  right: 8%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
}
.timeline .swiper-button-next:hover {
  transform: translateX(3px);
}
@media screen and (min-width: 768px) {
  .timeline .swiper-slide::after {
    right: -30%;
    bottom: -8%;
    width: 240px;
    height: 50%;
    box-shadow: -230px 0 150px 50vw rgba(0, 0, 0, 0.7);
  }
  .timeline .swiper-slide-content {
    right: 30%;
    top: 50%;
    transform: translateY(-50%);
    width: 310px;
    font-size: 11px;
    text-align: right;
  }
  .timeline .swiper-slide .timeline-year {
    margin-bottom: 0;
    font-size: 32px;
  }
  .timeline .swiper-slide .timeline-title {
    font-size: 46px;
    margin: 0;
  }
  .timeline .swiper-pagination {
    display: flex;
  }
  .timeline .swiper-button-prev {
    top: 15%;
    left: auto;
    right: 15%;
    transform: rotate(90deg) translate(0, 10px);
  }
  .timeline .swiper-button-prev:hover {
    transform: rotate(90deg) translate(-3px, 10px);
  }
  .timeline .swiper-button-next {
    top: auto;
    bottom: 15%;
    right: 15%;
    transform: rotate(90deg) translate(0, 10px);
  }
  .timeline .swiper-button-next:hover {
    transform: rotate(90deg) translate(3px, 10px);
  }
}
@media screen and (min-width: 1024px) {
  .timeline .swiper-slide::after {
    right: -20%;
    bottom: -12%;
    width: 240px;
    height: 50%;
    box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);
  }
  .timeline .swiper-slide-content {
    right: 25%;
  }
}
</style>
</head>
<body>
  <div class="container">
  <h1 class="title">Heading</h1>
  <div class="timeline">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url(https://unsplash.it/1920/500?image=11" data-year="2011">
          <div class="swiper-slide-content"><span class="timeline-year">2011</span>
            <h4 class="timeline-title">Our nice super title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url(https://unsplash.it/1920/500?image=12" data-year="2012">
          <div class="swiper-slide-content"><span class="timeline-year">2012</span>
            <h4 class="timeline-title">Our nice super title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url(https://unsplash.it/1920/500?image=13" data-year="2013">
          <div class="swiper-slide-content"><span class="timeline-year">2013</span>
            <h4 class="timeline-title">Our nice super title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url(https://unsplash.it/1920/500?image=14" data-year="2014">
          <div class="swiper-slide-content"><span class="timeline-year">2014</span>
            <h4 class="timeline-title">Our nice super title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url(https://unsplash.it/1920/500?image=15" data-year="2015">
          <div class="swiper-slide-content"><span class="timeline-year">2015</span>
            <h4 class="timeline-title">Our nice super title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url(https://unsplash.it/1920/500?image=16" data-year="2016">
          <div class="swiper-slide-content"><span class="timeline-year">2016</span>
            <h4 class="timeline-title">Our nice super title</h4>
            <p class="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js'></script>
      <script>
var timelineSwiper = new Swiper('.timeline .swiper-container', {
  direction: 'vertical',
  loop: false,
  speed: 1600,
  pagination: '.swiper-pagination',
  paginationBulletRender: function (swiper, index, className) {
    var year = document.querySelectorAll('.swiper-slide')[index].getAttribute('data-year');
    return '<span class="' + className + '">' + year + '</span>';
  },
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  breakpoints: {
    768: {
      direction: 'horizontal' } } });
    </script>
</body>
</html>

8. By Muhammed Erdem

Made by Muhammed Erdem. Responsive Blog Card Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
* {
  box-sizing: border-box;
}

body {
  background-color: #FFE53B;
  background-image: linear-gradient(147deg, #FFE53B 0%, #fd3838 74%);
  min-height: 100vh;
  font-family: "Fira Sans", sans-serif;
  display: flex;
}

.blog-slider {
  width: 95%;
  position: relative;
  max-width: 800px;
  margin: auto;
  background: #fff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 25px;
  border-radius: 25px;
  height: 400px;
  transition: all 0.3s;
}
@media screen and (max-width: 992px) {
  .blog-slider {
    max-width: 680px;
    height: 400px;
  }
}
@media screen and (max-width: 768px) {
  .blog-slider {
    min-height: 500px;
    height: auto;
    margin: 180px auto;
  }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider {
    height: 350px;
  }
}
.blog-slider__item {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .blog-slider__item {
    flex-direction: column;
  }
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
  opacity: 1;
  transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
  opacity: 1;
  transform: none;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
  transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
  transition-delay: 0.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
  transition-delay: 0.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
  transition-delay: 0.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
  transition-delay: 0.7s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
  transition-delay: 0.8s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
  transition-delay: 0.9s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
  transition-delay: 1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
  transition-delay: 1.1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
  transition-delay: 1.2s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
  transition-delay: 1.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
  transition-delay: 1.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
  transition-delay: 1.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
  transition-delay: 1.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
  transition-delay: 1.7s;
}
.blog-slider__img {
  width: 300px;
  flex-shrink: 0;
  height: 300px;
  background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
  border-radius: 20px;
  transform: translateX(-80px);
  overflow: hidden;
}
.blog-slider__img:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  border-radius: 20px;
  opacity: 0.8;
}
.blog-slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  border-radius: 20px;
  transition: all 0.3s;
}
@media screen and (max-width: 768px) {
  .blog-slider__img {
    transform: translateY(-50%);
    width: 90%;
  }
}
@media screen and (max-width: 576px) {
  .blog-slider__img {
    width: 95%;
  }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider__img {
    height: 270px;
  }
}
.blog-slider__content {
  padding-right: 25px;
}
@media screen and (max-width: 768px) {
  .blog-slider__content {
    margin-top: -80px;
    text-align: center;
    padding: 0 30px;
  }
}
@media screen and (max-width: 576px) {
  .blog-slider__content {
    padding: 0;
  }
}
.blog-slider__content > * {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.4s;
}
.blog-slider__code {
  color: #7b7992;
  margin-bottom: 15px;
  display: block;
  font-weight: 500;
}
.blog-slider__title {
  font-size: 24px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}
.blog-slider__text {
  color: #4e4a67;
  margin-bottom: 30px;
  line-height: 1.5em;
}
.blog-slider__button {
  display: inline-flex;
  background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  padding: 15px 35px;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
  text-decoration: none;
  font-weight: 500;
  justify-content: center;
  text-align: center;
  letter-spacing: 1px;
}
@media screen and (max-width: 576px) {
  .blog-slider__button {
    width: 100%;
  }
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.blog-slider__pagination {
  position: absolute;
  z-index: 21;
  right: 20px;
  width: 11px !important;
  text-align: center;
  left: auto !important;
  top: 50%;
  bottom: auto !important;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination {
    transform: translateX(-50%);
    left: 50% !important;
    top: 205px;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 8px 0;
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
  }
}
.blog-slider__pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  display: block;
  border-radius: 10px;
  background: #062744;
  opacity: 0.2;
  transition: all 0.3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #fd3838;
  height: 30px;
  box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination .swiper-pagination-bullet-active {
    height: 11px;
    width: 30px;
  }
}
</style>
</head>
<body>
  <div class="blog-slider">
  <div class="blog-slider__wrp swiper-wrapper">
    <div class="blog-slider__item swiper-slide">
      <div class="blog-slider__img">
        
        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1535759872/kuldar-kalvik-799168-unsplash.webp" alt="">
      </div>
      <div class="blog-slider__content">
        <span class="blog-slider__code">26 December 2019</span>
        <div class="blog-slider__title">Lorem Ipsum Dolor</div>
        <div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi? </div>
        <a href="#" class="blog-slider__button">READ MORE</a>
      </div>
    </div>
    <div class="blog-slider__item swiper-slide">
      <div class="blog-slider__img">
        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1535759871/jason-leung-798979-unsplash.webp" alt="">
      </div>
      <div class="blog-slider__content">
        <span class="blog-slider__code">26 December 2019</span>
        <div class="blog-slider__title">Lorem Ipsum Dolor2</div>
        <div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
        <a href="#" class="blog-slider__button">READ MORE</a>
      </div>
    </div>
    
    <div class="blog-slider__item swiper-slide">
      <div class="blog-slider__img">
        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1535759871/alessandro-capuzzi-799180-unsplash.webp" alt="">
      </div>
      <div class="blog-slider__content">
        <span class="blog-slider__code">26 December 2019</span>
        <div class="blog-slider__title">Lorem Ipsum Dolor</div>
        <div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
        <a href="#" class="blog-slider__button">READ MORE</a>
      </div>
    </div>
    
  </div>
  <div class="blog-slider__pagination"></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
      <script>
var swiper = new Swiper('.blog-slider', {
  spaceBetween: 30,
  effect: 'fade',
  loop: true,
  mousewheel: {
    invert: false },

  // autoHeight: true,
  pagination: {
    el: '.blog-slider__pagination',
    clickable: true } });

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

9. By Darya

Made by Darya. Slick JavaScript Responsive Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://necolas.github.io/normalize.css/latest/normalize.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css'> 
<style>
//style
body,
html {
  background: #fff;
  height: 100%;
}

.headline h2,
.headline p {
  text-align: center;
  margin-block-start: 0;
}

h2 {
  font-family: Helvetica Neue, "Arial";
  font-style: normal;
  font-weight: bold;
  font-size: 6vw;
  line-height: 110%;
}

.headline {
  padding-top: 64px;
}

body {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-align: center;
  font-family: Helvetica Neue, "Arial";
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #000000;
  transition: all 0.1s ease;
  overflow-x: hidden;
}

//slider
.slick-list,
.slick-slider,
.slick-track {
  position: relative;
  display: block;
}

.slider {
  width: 100%;
}

.slick-list,
.slick-slider,
.slick-track {
  position: relative;
  display: block;
}

.slick-slider .slick-list,
.slick-slider .slick-track {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-list {
  margin: 0;
  padding: 0;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

.slick-slide {
  margin: 0 20px;
  outline: 0;
}

.slick-initialized .slick-slide {
  display: block;
}

.slider_card {
  width: 480px;
  background: #ffffff;
  box-shadow: 10px 10px 50px 3px rgba(39, 92, 141, 0.1);
  border-radius: 12px;
}

.slick-next,
.slick-next:focus,
.slick-next:hover,
.slick-prev,
.slick-prev:focus,
.slick-prev:hover {
  background: 0 0;
  color: transparent;
}

.slider_text {
  padding: 52px 64px;
  text-align: left;
}

.slider_text h2 {
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  margin-block-start: 0em;
}

.slider_text p {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
}

.slider_img {
  margin-top: 8px;
  position: relative;
  bottom: 2px;
  left: 0;
}

.slick-slider {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: 0;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
  outline: 0;
}

.slick-dots li,
.slick-dots li button {
  cursor: pointer;
  height: 20px;
  width: 20px;
}

.slider_report {
  margin-top: 14px;
}

.slick-slider .slick-list,
.slick-slider .slick-track {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  top: 0;
  left: 0;
}

.slick-track:after,
.slick-track:before {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.arrow {
  margin-bottom: 80px;
}
.arrow li {
  list-style: none;
  display: inline-block !important;
  float: left;
}
.arrow ul {
  margin: 0;
  padding: 0;
  margin-top: 24px;
  margin-bottom: 80px;
}
.slick-next:focus,
.slick-prev:focus {
  outline: 0;
}
.slick-next,
.slick-prev {
  font-size: 0;
  line-height: 0;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  padding: 0;
  cursor: pointer;
  border: none;
}

.slick-next.slick-disabled:before,
.slick-prev.slick-disabled:before {
  opacity: 0.25;
}

.slick-next:before,
.slick-prev:before {
  width: 60px;
  height: 22px;
  margin-top: 5px;
  margin-left: -30px;
  position: relative;
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-next:hover,
.slick-prev:hover {
  opacity: 1;
}

.slick-prev {
  opacity: 0.3;
}

.slick-next {
  opacity: 0.3;
}

[dir="rtl"] .slick-prev {
  right: -25px;
  left: auto;
}

[dir="rtl"] .slick-prev:before {
  content: "β†’";
}

[dir="rtl"] .slick-next {
  right: auto;
  left: -25px;
}

[dir="rtl"] .slick-next:before {
  content: "←";
}

.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 0;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  padding: 5px;
  color: transparent;
  border: 0;
  background: 0 0;
}

.slick-dots li button:focus:before,
.slick-dots li button:hover:before {
  opacity: 1;
}

.slick-dots li button:before {
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "β€’";
  text-align: center;
  opacity: 0.25;
  color: #000;
  -moz-osx-font-smoothing: grayscale;
}

.slick-slide img,
.slider {
  width: 100%;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #000;
}

.slider {
  margin: 56px auto 0;
  padding-right: 0;
  padding-left: 2rem;
  margin-top: 0;
}

.slick-slide {
  margin: 0 20px;
  outline: 0;
}

.slick-next:before,
.slick-prev:before {
  color: #000;
}

.slick-current {
  font-size: initial;
}
@media screen and (max-width: 991px) {
  .slider_card {
    margin: 0 !important;
  }
  .arrow li {
  float: none;
}
}
</style>
</head>
<body>
  <body>
  <section>
    <div class="container">
      <div class="row headline">
        <div class="col-xs-12 col-lg-12">
          <h2>The best design<br> for your
            studio website</h2>
        </div>
      </div>
    </div>
    <div class="slider_report">
      <section class="variable slider">
        <div>
          <div class="item1 slider_card">

            <div class="body_card">
              <div class="slider_text">
                <h2>Name</h2>
                <p class="top8">
                  Lorem ipsum dolor sit amet, consectetur adipiscing Ac aliquam ac volutpat, viverra magna risus aliquam massa.
                  Ac aliquam ac volutpat, viverra magna risus.
                </p>
              </div>
            </div>

          </div>
        </div>
        <div>
          <div class="item2 slider_card">

            <div class="body_card">
              <div class="slider_text">
                <h2>Name</h2>
                <p class="top8">
                  Lorem ipsum dolor sit amet, consectetur adipiscing Ac aliquam ac volutpat, viverra magna risus aliquam massa.
                  Ac aliquam ac volutpat, viverra magna risus.
                </p>
              </div>
            </div>

          </div>
        </div>
        <div>
          <div class="item3 slider_card">

            <div class="body_card">
              <div class="slider_text">
                <h2>Name</h2>
                <p class="top8">
                  Lorem ipsum dolor sit amet, consectetur adipiscing Ac aliquam ac volutpat, viverra magna risus aliquam massa.
                  Ac aliquam ac volutpat, viverra magna risus.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="item4 slider_card">

            <div class="body_card">
              <div class="slider_text">
                <h2>Name</h2>
                <p class="top8">
                  Lorem ipsum dolor sit amet, consectetur adipiscing Ac aliquam ac volutpat, viverra magna risus aliquam massa.
                  Ac aliquam ac volutpat, viverra magna risus.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="container arrow">
      <div class="row">
        <div class="col-xs-12 col-lg-12">
          <ul>
            <li class="prev">
              <button class="slick-prev slick-arrow" aria-label="Previous" type="button"><svg width="51" height="52" viewBox="0 0 51 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g opacity="0.6">
                    <path d="M39.5251 23.8557V27.3974H18.2751L28.0147 37.137L25.5001 39.6516L11.4751 25.6266L25.5001 11.6016L28.0147 14.1161L18.2751 23.8557H39.5251Z" fill="#11131E" />
                  </g>
                </svg>
              </button>
            </li>
            <li class="next">
              <button class="slick-next slick-arrow" aria-label="Next" type="button"><svg width="51" height="52" viewBox="0 0 51 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g opacity="0.6">
                    <path d="M11.4751 23.8557V27.3974H32.7251L22.9855 37.137L25.5001 39.6516L39.5251 25.6266L25.5001 11.6016L22.9855 14.1161L32.7251 23.8557H11.4751Z" fill="#11131E" />
                  </g>
                </svg>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
  <script>
    
  </script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'></script>
      <script>
function initEmptySlide() {
  const margin = $(".container")[0].getClientRects()[0].x;
  $(".item1").css("margin-left", Math.floor(margin) - 15);
}

$(window).resize(function () {
  initEmptySlide();
});

$(document).on("ready", function () {
  initEmptySlide();

  $(".variable").slick({
    dots: false,
    focusOnSelect: false,
    infinite: false,
    variableWidth: true,
    slidesToShow: 2,
    slidesToScroll: 1,
    prevArrow: $(".prev"),
    nextArrow: $(".next"),
    centerPadding: "40px",
    responsive: [
    {
      breakpoint: 991,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true } },

    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        dots: false,
        infinite: true } }] });
});
    </script>
</body>
</html>

10. By Danny C

Made by Danny C. Responsive Video Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body{
 background-color:#777; 
}
#nav{
  display:none;
}
.embed-container { 
  position: relative; 
  height: 0; overflow: hidden; max-width: 100%; height: auto; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}
/*
	AnythingSlider v1.8+ Default theme
	By Chris Coyier: https://css-tricks.com
	with major improvements by Doug Neiner: http://pixelgraphics.us/
	based on work by Remy Sharp: http://jqueryfordesigners.com/
*/

/*****************************
  SET DEFAULT DIMENSIONS HERE
 *****************************/
/* change the ID & dimensions to match your slider */
#anythingWrap {
	width: 100%;
  height:540px;
	list-style: none;
	/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
	overflow-y: auto;
	overflow-x: hidden;
}

/******************
  SET STYLING HERE
 ******************
 =================================
 Default state (no keyboard focus)
 ==================================*/
/* Overall Wrapper */
.anythingSlider-default {
	margin: 0 auto;
	/* 45px right & left padding for the arrows, 28px @ bottom for navigation */
	padding: 0 45px 28px 45px;
}
/* slider window - top & bottom borders, default state */
.anythingSlider-default .anythingWindow {

}
/* Navigation buttons + start/stop button, default state */
.anythingSlider-default .anythingControls a {
	/* top shadow */
	background: #777 url(../images/default.png) center -288px repeat-x;
	color: #000;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
}
/* Make sure navigation text is visible */
.anythingSlider-default .anythingControls a span {
	visibility: visible;
}
/* Navigation current button, default state */
.anythingSlider-default .anythingControls a.cur {
	background: #888;
	color: #000;
}

/* start-stop button, stopped, default state */
.anythingSlider-default .anythingControls a.start-stop {
	background-color: #040;
	color: #ddd;
}
/* start-stop button, playing, default state */
.anythingSlider-default .anythingControls a.start-stop.playing {
	background-color: #800;
}

/* start-stop button, default hovered text color (when visible) */
/* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */
.anythingSlider-default .anythingControls a.start-stop:hover,
.anythingSlider-default .anythingControls a.start-stop.hover,
.anythingSlider-default .anythingControls a.start-stop .anythingControls ul a:hover {
	background-image: none;
	color: #ddd;
}

/*
 =================================
 Active State (has keyboard focus)
 =================================
*/
/* slider window - top & bottom borders, active state */
.anythingSlider-default.activeSlider .anythingWindow {

}
/* Navigation buttons, active state */
.anythingSlider-default.activeSlider .anythingControls a {
	/* background image = top shadow */
}
/* Navigation current & hovered button, active state */
.anythingSlider-default.activeSlider .anythingControls a.cur,
.anythingSlider-default.activeSlider .anythingControls a:hover {
	/* background image removed */
}

/* start-stop button, stopped, active state */
.anythingSlider-default.activeSlider .anythingControls a.start-stop {
	background-color: #080;
	color: #fff;
}
/* start-stop button, playing, active state */
.anythingSlider-default.activeSlider .anythingControls a.start-stop.playing {
	background-color: #d00;
	color: #fff;
}
/* start-stop button, active slider hovered text color (when visible) */
.anythingSlider-default.activeSlider .start-stop:hover,
.anythingSlider-default.activeSlider .start-stop.hover {
	color: #fff;
}

/************************
  NAVIGATION POSITIONING
 ************************/
/* Navigation Arrows */
.anythingSlider-default .arrow {
	top: 50%;
	position: absolute;
	display: block;
}

.anythingSlider-default .arrow a {
	display: block;
	width: 45px;
	height: 140px;
	margin: -70px 0 0 0; /* half height of image */
	text-align: center;
	outline: 0;
	background: url('https://www.jqueryscript.net/demo/Powerful-Responsive-Slider-Plugin-For-jQuery-AnythingSlider/images/default.png') no-repeat;
}

/* back arrow */
.anythingSlider-default .back { left: 0; }
.anythingSlider-default .back a { background-position: left top; }
.anythingSlider-default .back a:hover,
.anythingSlider-default .back a.hover { background-position: left -140px; }
/* forward arrow */
.anythingSlider-default .forward { right: 0; }
.anythingSlider-default .forward a { background-position: right top; }
.anythingSlider-default .forward a:hover,
.anythingSlider-default .forward a.hover { background-position: right -140px; }

/* Navigation Links */
.anythingSlider-default .anythingControls { outline: 0; display: none; }
.anythingSlider-default .anythingControls ul { margin: 0; padding: 0; float: left; }
.anythingSlider-default .anythingControls ul li { display: inline; }
.anythingSlider-default .anythingControls ul a {
	font: 11px/18px Georgia, Serif;
	display: inline-block;
	text-decoration: none;
	padding: 2px 8px;
	height: 18px;
	margin: 0 5px 0 0;
	text-align: center;
	outline: 0;
}

/* navigationSize window */
.anythingSlider-default .anythingControls .anythingNavWindow {
	overflow: hidden;
	float: left;
}

/* Autoplay Start/Stop button */
.anythingSlider-default .anythingControls .start-stop {
	padding: 2px 5px;
	width: 40px;
	text-align: center;
	text-decoration: none;
	float: right;
	z-index: 100;
	outline: 0;
}

/***********************
  IE8 AND OLDER STYLING
 ***********************/

/* Navigation Arrows */
.as-oldie .anythingSlider-default .arrow {
	top: 30%;
}
.as-oldie .anythingSlider-default .arrow a {
	margin: 0;
}

/* margin between nav buttons just looks better */
.as-oldie .anythingSlider-default .anythingControls li {
	margin-left: 3px;
}

/* When using the navigationSize option, the side margins need to be zero
	None of the navigation panels look good in IE7 now =( */
.as-oldie .anythingSlider-default .anythingControls a {
	margin: 0;
}
.as-oldie .anythingSlider-default .anythingNavWindow {
	margin: 0 2px;
}
.as-oldie .anythingSlider-default .anythingNavWindow li {
	padding: 3px 0 0 0;
}

/***********************
  COMMON SLIDER STYLING
 ***********************/
/* Overall Wrapper */
.anythingSlider {
	display: block;
	overflow: visible !important;
	position: relative;
}
/* anythingSlider viewport window */
.anythingSlider .anythingWindow {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}
/* anythingSlider base (original element) */
.anythingSlider .anythingBase {
	background: transparent;
	list-style: none;
	position: absolute;
	overflow: visible !important;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
}

/* Navigation arrow text; indent moved to span inside "a", for IE7;
  apparently, a negative text-indent on an "a" link moves the link as well as the text */
.anythingSlider .arrow span {
	display: block;
	visibility: hidden;
}
/* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
.anythingSlider .arrow.disabled {
	display: none;
}
/* all panels inside the slider; horizontal mode */
.anythingSlider .panel {
	background: transparent;
	display: block;
	overflow: hidden;
	float: left;
	padding: 0;
	margin: 0;
}
/* vertical mode */
.anythingSlider .vertical .panel {
	float: none;
}
/* fade mode */
.anythingSlider .fade .panel {
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
/* fade mode active page - visible & on top */
.anythingSlider .fade .activePage {
	z-index: 1;
}
</style>
</head>
<body>
  <!-- Expanding AnythingSlider 100% width -->
<div id="nav"></div>
  <div id="anythingWrap">
	<ul id="slider">
		<li>
      <div class='embed-container'><iframe src='https://player.vimeo.com/video/85037704' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
    </li>
		<li>
      <div class='embed-container'><iframe src='https://player.vimeo.com/video/12155835' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
    </li>
		<li>
      <img src="https://res.cloudinary.com/jackywinter/image/upload/c_scale,q_100,h_500,fl_awebp/by9pvjrtzhsdvhdv0nw1.webp" />
    </li>
		<li>
    <div class='embed-container'><iframe src='https://player.vimeo.com/video/84391929' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
    </li>
	</ul>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://www.jqueryscript.net/demo/Powerful-Responsive-Slider-Plugin-For-jQuery-AnythingSlider/js/jquery.anythingslider.js'></script>
      <script>
$('#slider').anythingSlider({
  expand: true,
  autoPlay: false,
  buildArrows: true,
  buildStartStop: false,
  buildNavigation: false,
  /*appendControlsTo: $('#nav'),*/
  appendForwardTo: null,
  appendBackTo: null });


$('#slider1').anythingSlider({
  // Appearance
  theme: "default", // Theme name
  mode: "horiz", // Set mode to "horizontal", "vertical" or "fade" (only first letter needed); replaces vertical option
  expand: false, // If true, the entire slider will expand to fit the parent element
  resizeContents: true, // If true, solitary images/objects in the panel will expand to fit the viewport
  showMultiple: false, // Set this value to a number and it will show that many slides at once
  easing: "swing", // Anything other than "linear" or "swing" requires the easing plugin or 

  buildArrows: true, // If true, builds the forwards and backwards buttons
  buildNavigation: true, // If true, builds a list of anchor links to link to each panel
  buildStartStop: true, // If true, builds the start/stop button

  appendForwardTo: null, // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendBackTo: null, // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendControlsTo: null, // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendNavigationTo: null, // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendStartStopTo: null, // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null

  toggleArrows: false, // If true, side navigation arrows will slide out on hovering & hide @ other times
  toggleControls: false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times

  startText: "Start", // Start button text
  stopText: "Stop", // Stop button text
  forwardText: "&raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
  backText: "&laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
  tooltipClass: "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)

  // Function
  enableArrows: true, // if false, arrows will be visible, but not clickable.
  enableNavigation: true, // if false, navigation links will still be visible, but not clickable.
  enableStartStop: true, // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
  enableKeyboard: true, // if false, keyboard arrow keys will not work for this slider.

  // Navigation
  startPanel: 1, // This sets the initial panel
  changeBy: 1, // Amount to go forward or back when changing panels.
  hashTags: true, // Should links change the hashtag in the URL?
  infiniteSlides: true, // if false, the slider will not wrap & not clone any panels
  navigationFormatter: null, // Details at the top of the file on this use (advanced use)
  navigationSize: false, // Set this to the maximum number of visible navigation tabs; false to disable

  // Slideshow options
  autoPlay: false, // If true, the slideshow will start running; replaces "startStopped" option
  autoPlayLocked: false, // If true, user changing slides will not stop the slideshow
  autoPlayDelayed: false, // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
  pauseOnHover: true, // If true & the slideshow is active, the slideshow will pause on hover
  stopAtEnd: false, // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
  playRtl: false, // If true, the slideshow will move right-to-left

  // Times
  delay: 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
  resumeDelay: 15000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
  animationTime: 600, // How long the slideshow transition takes (in milliseconds)
  delayBeforeAnimate: 0, // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).

  // Callbacks
  onBeforeInitialize: function (e, slider) {}, // Callback before the plugin initializes
  onInitialized: function (e, slider) {}, // Callback when the plugin finished initializing
  onShowStart: function (e, slider) {}, // Callback on slideshow start
  onShowStop: function (e, slider) {}, // Callback after slideshow stops
  onShowPause: function (e, slider) {}, // Callback when slideshow pauses
  onShowUnpause: function (e, slider) {}, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
  onSlideInit: function (e, slider) {}, // Callback when slide initiates, before control animation
  onSlideBegin: function (e, slider) {}, // Callback before slide animates
  onSlideComplete: function (slider) {}, // Callback when slide completes; this is the only callback without an event "e" parameter

  // Interactivity
  clickForwardArrow: "click", // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
  clickBackArrow: "click", // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
  clickControls: "click focusin", // Events used to activate navigation control functionality
  clickSlideshow: "click", // Event used to activate slideshow play/stop button
  allowRapidChange: false, // If true, allow rapid changing of the active pane, instead of ignoring activity during animation

  // Video
  resumeOnVideoEnd: true, // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
  resumeOnVisible: true, // If true the video will resume playing (if previously paused, except for YouTube iframe - known issue); if false, the video remains paused.
  addWmodeToObject: "opaque", // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
  isVideoPlaying: function (base) {return false;} // return true if video is playing or false if not - used by video extension
});
    </script>
</body>
</html>

11. By Ignacio Correa

Made by Ignacio Correa. Carousel Slider. Simple, easy and responsive. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h2 {
  text-align: center;
  padding: 50px 0;
  font-family: "Abel", sans-serif;
  font-size: 45px;
}
@media (max-width: 680px) {
  h2 {
    font-size: 30px;
  }
}

ul {
  padding: 0;
  list-style: none;
}
ul:after {
  content: "";
  display: block;
  clear: both;
}

#container {
  width: 100%;
}

#slider-container {
  width: 100%;
  position: relative;
  overflow: hidden;
}
#slider-container ul li {
  float: left;
}
#slider-container ul li img {
  width: 100%;
  float: left;
}
#slider-container .arrow {
  display: block;
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  transform: translateY(-50%) scale(1);
  cursor: pointer;
}
#slider-container .arrow:before, #slider-container .arrow:after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  position: absolute;
  background: white;
  border-top: 1px solid grey;
}
@media (max-width: 680px) {
  #slider-container .arrow {
    transform: translateY(-50%) scale(0.5);
  }
}
#slider-container .arrow.a-left {
  left: 15px;
}
#slider-container .arrow.a-left:before {
  top: 0;
  left: 0;
  margin-top: 0;
  transform: rotate(-45deg);
  transform-origin: 100% 0;
}
#slider-container .arrow.a-left:after {
  bottom: 0;
  left: 0;
  margin-bottom: 0;
  transform: rotate(45deg);
  transform-origin: 100% 0;
}
#slider-container .arrow.a-right {
  right: 15px;
}
#slider-container .arrow.a-right:before {
  top: 0;
  right: 0;
  margin-top: 0;
  transform: rotate(45deg);
  transform-origin: 0 0;
}
#slider-container .arrow.a-right:after {
  bottom: 0;
  right: 0;
  margin-bottom: 0;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}
#slider-container .bullets-container {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
#slider-container .bullets-container .bullet {
  width: 15px;
  height: 15px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid grey;
  cursor: pointer;
  margin: 0 8px;
}
#slider-container .bullets-container .bullet.active {
  background: grey;
}
</style>
</head>
<body>
  <h2>Simple responsive slider</h2>
<section id="container">
  <div id="slider-container">
    <ul class="images-container">
      <li>
       <img src="http://cdn1.lewitt-audio.com/sites/default/files/styles/wide_cover_medium/public/2017-10/screen01-Lewitt-DTP340REX-gradient-hirez-01-2912-02.jpg">
      </li>
      <li>
        <img src="http://cdn1.lewitt-audio.com/sites/default/files/styles/wide_cover_medium/public/2017-01/LCT-240-PRO.jpg">
      </li>
            <li>
        <img src="http://cdn1.lewitt-audio.com/sites/default/files/styles/wide_cover_medium/public/2016-06/screen01_Lewitt-LCT140-gradient-small-02.jpg">
      </li>
      <li>
        <img src="http://cdn1.lewitt-audio.com/sites/default/files/styles/wide_cover_medium/public/2017-10/LCT-540-SUBZERO-113-website-04.jpg">
      </li>
    </ul>
    <span class="arrow a-left"></span>
    <span class="arrow a-right"></span>
    <div class='bullets-container'></div>
  </div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
$(document).ready(mySlider);

function mySlider() {
  var imgNumber,
  sliderContainerWidth,
  imgContainer,
  index,
  flag = true,
  speed = 600,
  bullets = true,
  auto = true,
  time = 5000;

  construction();
  $(window).resize(construction);
  if (auto) {
    var handle = setInterval(slideRight, time);
  }

  function construction() {
    index = 1;
    imgNumber = $('.images-container li').length;
    sliderContainerWidth = Math.round($('#slider-container').width());
    imgContainer = sliderContainerWidth * imgNumber;
    $('.images-container').css("width", imgContainer);
    $('.images-container li').css("width", sliderContainerWidth);
    $('.images-container').css("margin-left", 0);
    if (bullets == true) {
      $('.bullets-container').html("");
      for (i = 1; i <= imgNumber; i++) {
        $('.bullets-container').append("<span class='bullet'></span>");
      }
      $('.bullet').eq(0).addClass('active');
    }
    $(".bullet").click(pagers);
    $('.a-right').click(slideRight);
    $('.a-left').click(slideLeft);
  }

  function pagers() {
    if (!$(this).hasClass('active')) {
      var bulletIndex = $(".bullets-container span").index(this) + 1;
      index = bulletIndex;
      $(".bullets-container").find(".bullet").removeClass("active").eq(bulletIndex - 1).addClass("active");
      $('.images-container').animate({
        marginLeft: -sliderContainerWidth * (bulletIndex - 1) },
      speed);
    }
  }

  function slideRight() {
    var imgContainerLeft = parseInt($('.images-container').css('margin-left'));
    if (flag) {
      if (imgContainerLeft == -sliderContainerWidth * (imgNumber - 1)) {
        index = 1;
        $('.images-container').animate({
          marginLeft: 0 },
        speed, function () {
          flag = true;
        });
      } else {
        index++;
        $('.images-container').animate({
          marginLeft: '-=' + sliderContainerWidth },
        speed, function () {
          flag = true;
        });
      }
      flag = false;
      $(".bullets-container").find(".bullet").removeClass("active").eq(index - 1).addClass("active");
    }
  }

  function slideLeft() {
    var imgContainerLeft = parseInt($('.images-container').css('margin-left'));
    clearInterval(slideRight, 3000);
    if (flag) {
      if (imgContainerLeft == 0) {
        index = index + (imgNumber - 1);
        $('.images-container').animate({
          marginLeft: -sliderContainerWidth * (imgNumber - 1) + 'px' },
        speed, function () {
          flag = true;
        });
      } else {
        index--;
        $('.images-container').animate({
          marginLeft: '+=' + sliderContainerWidth },
        speed, function () {
          flag = true;
        });
      }
      flag = false;
      $(".bullets-container").find(".bullet").removeClass("active").eq(index - 1).addClass("active");
    }

  }
  $("#slider-container .arrow , .bullets-container").hover(function () {
    clearInterval(handle);
  }, function () {
    handle = setInterval(slideRight, time);
  });

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