30+ CSS Slider Examples

This post contains a total of 30+ CSS Slider Examples with Source Code. All these Sliders are made using CSS.

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

Related Posts

CSS Slider Examples

1. Greensock animated slideshow [wip]

Made by Arden. Greensock animated slideshow, CSS Slider with slide and popup animations, uses very smooth animations. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <script src="https://use.typekit.net/vms5sey.js"></script>
  <script>try{Typekit.load({ async: true });}catch(e){}</script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background-color: #000;
  font-family: "industry";
}

.slideShow {
  height: 100%;
  width: 75%;
  min-width: 750px;
  margin: 0 auto;
  overflow: visible;
}
.slideShow__container {
  height: 100%;
  width: 100%;
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  position: relative;
}
.slideShow__slide {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
}
.slideShow__image {
  display: block;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  transform: scale(0.8);
}
.slideShow__image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.slideShow__titleWrap {
  font-size: 1rem;
  position: absolute;
  left: 4rem;
  bottom: 4rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  color: #fff;
}
.slideShow__slideTitle {
  font-weight: 300;
  z-index: 500;
  color: #fff;
  font-size: 5em;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0 0 0.5rem;
  opacity: 0;
}
.slideShow__slideSubTitle {
  font-size: 1.5em;
  text-transform: uppercase;
  font-family: sans-serif;
  padding-left: 0.5rem;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0;
}
.slideShow__next, .slideShow__prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5em;
  line-height: 1em;
  color: #fff;
}
.slideShow__next i, .slideShow__prev i {
  display: block;
  float: left;
}
.slideShow__next {
  right: 1rem;
  cursor: pointer;
}
.slideShow__prev {
  left: 1rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
  transform-origin: center;
}
.slideShow__prev.is-inactive {
  opacity: 0.3;
  cursor: default;
}
</style>
</head>

<body translate="no" >
  <div class="slideShow">
  <ul class="slideShow__container">
    <li class="slideShow__slide">
      <figure class="slideShow__image" style="background-image:url(https://c2.staticflickr.com/8/7668/17188829572_53e8c45aec_h.jpg);"></figure>
      <div class="slideShow__titleWrap">
        <h2 class="slideShow__slideTitle">Barichara</h2>
        <div class="slideShow__slideSubTitle">La Abuelita</div>
      </div>
    </li>
    <li class="slideShow__slide">
      <figure class="slideShow__image" style="background-image:url(https://c2.staticflickr.com/8/7595/16575563694_5259f740ed_k.jpg);"></figure>
      <div class="slideShow__titleWrap">
        <h2 class="slideShow__slideTitle">Tayrona</h2>
        <div class="slideShow__slideSubTitle">La playa</div>
      </div>
    </li>
    <li class="slideShow__slide">
      <figure class="slideShow__image" style="background-image:url(https://c2.staticflickr.com/8/7723/17172064766_edf36b7b51_k.jpg);"></figure>
      <div class="slideShow__titleWrap">
        <h2 class="slideShow__slideTitle">Santa Marta</h2>
        <div class="slideShow__slideSubTitle">El Burro</div>
      </div>
    </li>
    <li class="slideShow__slide">
      <figure class="slideShow__image" style="background-image:url(https://c1.staticflickr.com/9/8714/17164716126_5494165d77_k.jpg);"></figure>
      <div class="slideShow__titleWrap">
        <h2 class="slideShow__slideTitle">Salento</h2>
        <div class="slideShow__slideSubTitle">La vista</div>
      </div>
    </li>
  </ul>
  <div class="slideShow__next"><i class="fa fa-angle-right"></i></div>
  <div class="slideShow__prev"><i class="fa fa-angle-left"></i></div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js'></script>
      <script id="rendered-js" >
// Debounce
function debounce(a, b, c) {var d;return function () {var e = this,f = arguments;clearTimeout(d), d = setTimeout(function () {d = null, c || a.apply(e, f);}, b), c && !d && a.apply(e, f);};}

var SlideShow = function () {

  var
  slider,
  slide,
  nextButton,
  prevButton,
  slideAmount,
  sliderWidth,
  title,
  subTitle,
  clickCounter,
  slideCounter;

  var _init = function () {
    slider = document.getElementsByClassName('slideShow__container')[0];
    slide = document.getElementsByClassName('slideShow__slide');
    slideAmount = slide.length;
    nextButton = document.getElementsByClassName('slideShow__next')[0];
    prevButton = document.getElementsByClassName('slideShow__prev')[0];
    title = document.getElementsByClassName('slideShow__slideTitle');
    subTitle = document.getElementsByClassName('slideShow__slideSubTitle');
    sliderWidth = parseInt(getComputedStyle(slider).width);
    clickCounter = 0;
    slideCounter = 0;

    _eventHandlers();
    _navButtons();
    _animateSlideIn(slideCounter);
  };

  var _eventHandlers = function () {
    nextButton.addEventListener('click', _slideNext, false);
    prevButton.addEventListener('click', _slidePrev, false);
    window.addEventListener('resize', _resize, false);
  };

  var _navButtons = function () {
    if (clickCounter === 0) {
      prevButton.classList.add('is-inactive');
    } else {
      prevButton.classList.remove('is-inactive');
    }
  };

  var _slideNext = function () {
    clickCounter++;
    slideCounter = clickCounter - 1;
    if (clickCounter >= slideAmount) {
      clickCounter = 0;
      slideCounter = slideAmount - 1;
    }
    var tl = new TimelineLite();
    tl.
    add(_animateSlideOut(slideCounter)).
    to(slider, .9, { x: -clickCounter * sliderWidth, ease: Power2.easeOut }).
    add(_animateSlideIn(clickCounter));
    _navButtons();
  };

  var _slidePrev = function () {
    if (clickCounter > 0) {
      clickCounter--;

      // _getPreviousSlide(clickCounter +1)
      var tl = new TimelineLite();
      tl.
      add(_animateSlideOut(clickCounter + 1)).
      to(slider, .9, { x: '+=' + sliderWidth, ease: Power2.easeOut }, '-=0.2').
      add(_animateSlideIn(clickCounter));

    }
    _navButtons();
  };

  var _animateSlideIn = function (index) {
    var currentSlide = slide[index];
    var title = currentSlide.children[1].children[0];
    var subTitle = currentSlide.children[1].children[1];
    var image = currentSlide.children[0];

    var splitTitle = new SplitText(title);
    var revertTitle = function () {
      splitTitle.revert();
    };

    TweenLite.set(title, { perspective: 400 });

    var tl = new TimelineLite({ onComplete: revertTitle });
    tl.
    set(title, { opacity: 1 }).
    staggerFrom(splitTitle.chars, 0.8, {
      opacity: 0,
      scale: 0,
      y: 80,
      rotationX: 180,
      transformOrigin: "0% 50% -50",
      ease: Back.easeOut },
    0.03).
    fromTo(subTitle, 0.6, { y: 50, opacity: 0 }, { y: 0, opacity: 1 }, '-=0.3').
    to(image, 0.4, { scale: 1, ease: Power2.easeOut }, '-=0.6');
    return tl;
  };

  var _animateSlideOut = function (index) {
    var currentSlide = slide[index];
    var title = currentSlide.children[1].children[0];
    var subTitle = currentSlide.children[1].children[1];
    var image = currentSlide.children[0];

    var tl = new TimelineLite();
    tl.
    to(title, 0.3, { opacity: 0 }).
    to(subTitle, 0.3, { y: 50, opacity: 0 }, '-=0.3').
    to(image, 0.4, { scale: 0.8, ease: Power2.easeIn }, '-=0.3');
    return tl;
  };

  var _resize = debounce(function () {
    sliderWidth = parseInt(getComputedStyle(slider).width);
    sliderOffset = sliderWidth * clickCounter;
    slider.style.transform = 'matrix(1, 0, 0, 1, -' + sliderOffset + ', 0)';
  }, 50);

  return {
    init: _init };


}();

SlideShow.init();
//# sourceURL=pen.js
    </script>

</body>
</html>
 

2. Html and css Sliders +google photo

Made by ULUGBEK ODILOV. Simple slider with button controls. Source


<html>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!--Google Fonts-->
    <style>
          .container{
            width: 100vw;
            height: 220px;
            position: relative;
        }
  /*Youtube link styling*/
        .ytlink{
            display: block;
            width:300px;
            text-align: center;
            font-family: 'Poppins',sans-serif;
            font-size: 20px;
            padding: 15px 10px;
            background-color: black;
            text-decoration: none;
            color: #F06060;
            font-weight: 600;
            position: absolute;
            transform: translate(-50%,-50%);
            left: 50%;
            top: 50%;
        }
.layer2  { 
 position: absolute;
  bottom: 15px; 
  line-height: 1px; 
  }

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}



body {
  background: rgb(34,193,195);
  background: linear-gradient(124deg, rgba(34,193,195,1) 0%, rgba(45,94,253,1) 100%);
  background-size: cover;
  background-attachment: fixed;
}



.visually-hidden { 
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; /* added line */
} 
  


.slider {
  position: relative;
  max-width: 900px;
  padding: 0 15px;
  margin: 30px auto;
}



.slider-list {
  display: flex;
  padding: 0;
  border: 5px solid #ffffff;
  margin: 0;
  overflow: hidden;
  list-style-type: none;
}



.slider-item {
  display: none;
  width: 100%;
  flex-shrink: 0;
}




#slider-control-1:checked ~ .slider-list .slider-item:nth-child(1),
#slider-control-2:checked ~ .slider-list .slider-item:nth-child(2),
#slider-control-3:checked ~ .slider-list .slider-item:nth-child(3),
#slider-control-4:checked ~ .slider-list .slider-item:nth-child(4),
#slider-control-5:checked ~ .slider-list .slider-item:nth-child(5) {
  display: block;
  }
  
  


.slider-img {
  display: block;
  max-width: 100%;
  height: auto;
}



.slider-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}




.slider-controls label {
  width: 25px;
  height: 25px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
   font-size: 0;
  cursor: pointer;
}


 
.slider-controls label:hover,
#slider-control-1:checked ~ .slider-controls label:nth-child(1),
#slider-control-2:checked ~ .slider-controls label:nth-child(2),
#slider-control-3:checked ~ .slider-controls label:nth-child(3),
#slider-control-4:checked ~ .slider-controls label:nth-child(4),
#slider-control-5:checked ~ .slider-controls label:nth-child(5) {
  background-color: #ffffff;
}    
    </style>
         <div class="container layer2">
        <a class="ytlink" href="https://www.youtube.com/channel/UCMlj80ijaBG3G9AAGUNG77g" target="_blank">
        <i class="fa fa-youtube-play" aria-hidden="true"></i> &nbsp; My Youtube Channel</a>
    </div>
<body>

<div class="slider">


 
 
  <input class="visually-hidden" type="radio" id="slider-control-1" name="slider_control" checked>
  <input class="visually-hidden" type="radio" id="slider-control-2" name="slider_control">
  <input class="visually-hidden" type="radio" id="slider-control-3" name="slider_control">
  <input class="visually-hidden" type="radio" id="slider-control-4" name="slider_control">
  <input class="visually-hidden" type="radio" id="slider-control-5" name="slider_control">
  
  
  
  
  
  <div class="slider-controls">
    <label for="slider-control-1">Slide 1</label>
    <label for="slider-control-2">Slide 2</label>
    <label for="slider-control-3">Slide 3</label>
    <label for="slider-control-4">Slide 4</label>
    <label for="slider-control-5">Slide 5</label>
  </div>
  
  
  
  
    <ul class="slider-list">
    <li class="slider-item">
      <img class="slider-img" src="https://picsum.photos/900/400?random=1" alt="Rasm">
    </li>

    <li class="slider-item">
      <img class="slider-img" src="https://picsum.photos/900/400?random=2" alt="Rasm">
    </li>
    <li class="slider-item">
      <img class="slider-img" src="https://picsum.photos/900/400?random=3" alt="Rasm">
    </li>
    <li class="slider-item">
      <img class="slider-img" src="https://picsum.photos/900/400?random=4" alt="Rasm">
    </li>
    <li class="slider-item">
      <img class="slider-img" src="https://picsum.photos/900/400?random=5" alt="Rasm">
    </li>
  </ul>
</div>
</body>
</html>

3. Exploring UI Animation

Made by Mario s Maselli. Smooth slider with text and image effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <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=Work+Sans:400,900,800,500,700,600);
*, *::after, *::before {
  box-sizing: border-box;
}

html, body {
  font-size: 6px;
  background: #fbfbfb;
  padding: 40px 20px;
  font-family: "Work Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 860px) {
  html, body {
    font-size: 8px;
    padding: 30px 50px;
  }
}
@media (min-width: 1200px) {
  html, body {
    font-size: 10px;
  }
}

.slider-wrapper {
  position: relative;
  max-width: 90rem;
  min-width: 480px;
  background: #fff;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 35px 20px #DDE5EE;
}
.slider-wrapper .slider {
  position: relative;
  height: 65rem;
  padding: 5rem 0;
}
.slider-wrapper .slider::after {
  content: "";
  display: table;
  clear: both;
}
.slider-wrapper .slider .slide-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.slider-wrapper .slide-navigation__squares, .slider-wrapper .slide-navigation__txt {
  width: 10%;
  position: relative;
  float: left;
  overflow: hidden;
}
.slider-wrapper .slide-navigation__squares::after, .slider-wrapper .slide-navigation__txt::after {
  content: "";
  display: table;
  clear: both;
}
.slider-wrapper .slide-navigation__txt {
  display: block;
  height: 100%;
}
.slider-wrapper .slide-navigation__txt::after {
  content: "";
  display: table;
  clear: both;
}
.slider-wrapper .slide-navigation__txt ul {
  margin: 0;
  list-style: none;
  padding: 0;
  position: absolute;
  display: table-cell;
  width: 30rem;
  transform: rotate(90deg);
  transform-origin: 0;
  margin-left: calc(50% - 0.14rem);
}
.slider-wrapper .slide-navigation__txt ul::after {
  content: "";
  display: table;
  clear: both;
}
.slider-wrapper .slide-navigation__txt li {
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin: 0 1.2rem;
  position: relative;
  float: left;
  font-size: 1.2rem;
  font-weight: 600;
  color: #A1A5B8;
}
.slider-wrapper .slide-navigation__txt li span {
  cursor: pointer;
  transition: all 0.5s ease;
  display: block;
}
.slider-wrapper .slide-navigation__txt li span.active {
  transform: scale(1.1, 1.1);
  color: #E34D67;
}
.slider-wrapper .slide-navigation__squares {
  display: block;
  height: 100%;
}
.slider-wrapper .slide-navigation__squares .squares-wrapper {
  position: absolute;
  margin-left: calc(50% - 0.4rem);
  bottom: 5rem;
  height: 4.6rem;
  overflow: hidden;
}
.slider-wrapper .slide-navigation__squares .squares-slider {
  position: relative;
  display: block;
  margin-top: -2.5rem;
  transform: translateY(-2.5rem);
}
.slider-wrapper .slide-navigation__squares .square {
  width: 0.6rem;
  height: 0.6rem;
  display: block;
  margin: 1.3rem 0;
  background: #A1A5B8;
}
.slider-wrapper .slide-navigation__squares .square.red {
  background: #E34D67;
}
.slider-wrapper .slides-container {
  position: relative;
  width: 80%;
  float: left;
  height: 100%;
}
.slider-wrapper .slide {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
}
.slider-wrapper .slide img {
  max-width: 100%;
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.slider-wrapper .slide .slide-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 5rem 5.8rem;
  overflow: hidden;
}
.slider-wrapper .slide .slide-content h1 {
  text-transform: uppercase;
  color: white;
  font-weight: 900;
  font-size: 10rem;
  text-align: center;
  margin: 0;
  opacity: 0.6;
  position: relative;
}
.slider-wrapper .slide .slide-content h2 {
  color: #E34D67;
  font-size: 4.8rem;
  max-width: 80%;
  margin: 0;
  margin-top: -6rem;
  font-weight: 900;
  line-height: 1;
  position: relative;
}
.slider-wrapper .slide .slide-txt {
  position: relative;
  display: block;
  width: 100;
  margin-top: 6rem;
}
.slider-wrapper .slide .slide-txt::after {
  content: "";
  display: table;
  clear: both;
}
.slider-wrapper .slide .slide-txt p {
  margin: 0;
  max-width: 55%;
  color: #666666;
  font-size: 1.2rem;
  line-height: 1.4;
  float: left;
}
.slider-wrapper .slide .slide-txt button {
  display: block;
  float: right;
  width: 18rem;
  text-align: center;
  background: transparent;
  background-color: transparent;
  border: 0.28rem solid #E34D67;
  text-transform: uppercase;
  padding: 0.8rem 0.5rem;
  font-size: 1.5rem;
  color: #E34D67;
  font-weight: 600;
  letter-spacing: 0.2rem;
  outline: none;
  overflow: hidden;
}
</style>
</head>

<body>
  <div class="slider-wrapper">
  <div class="slider">
    <div class="slide-navigation__squares">
      <div class="squares-wrapper">
        <div class="squares-slider">
           <span class="square"></span>
           <span class="square"></span>
           <span class="square red"></span>
           <span class="square "></span>
           <span class="square"></span>
          </div>
      </div>
      
    </div>
    <div class="slides-container">
      <div class="slide-wrapper">
        <div class="slide" data-order="1">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/photo-1428908728789-d2de25dbd4e2.jpeg" alt="" />
          <div class="slide-content">
            <h1>Discover</h1>
            <h2>The warm heart of Nordic Beauty</h2>
            <div class="slide-txt">
              <p>The Nordic Countries varied landscapes offer wonderful scenery for any journey, no matter by land or sea.  How you choose to travel will depend on where you go.</p>
              <button>Show regions</button>
            </div>
          </div>
         </div>
        <div class="slide" data-order="2">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/todo-banner.jpg" alt="" />
          <div class="slide-content">
            <h1>To do</h1>
            <h2>Close encounters with nature</h2>
            <div class="slide-txt">
              <p>There's never a bad time to visit the Nordic countries! When you should visit will depend on which types of activities or natural phenomena interest you most.</p>
              <button>Activities</button>
            </div>
          </div>
         </div>
        <div class="slide" data-order="3">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/plan-banner_copy.jpg" alt="" />
          <div class="slide-content">
            <h1>Plan</h1>
            <h2>Top attractions in the nordics</h2>
            <div class="slide-txt">
              <p>June, July and August is the best time to travel, this is when you can expect the warmest weather, longest daylight hours and best availability of outdoor activities.</p>
              <button>Reservations</button>
            </div>
          </div>
         </div>
      </div>
    </div>
    <div class="slide-navigation__txt">
      <ul>
        <li><span data-order="1">Discover</span></li>
        <li><span data-order="2">To do</span></li>
        <li><span data-order="3">Plan</span></li>
      </ul>
    </div>
  </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
      <script id="rendered-js" >
/*

Inspired by the work of the guys at Tubik Studio.
Dribble: https://dribbble.com/Tubik.
https://dribbble.com/shots/2710181-Tubik-Studio-Ice.

*/


var initialSlide = $('.slides-container [data-order="1"]');
var initalSelected = $('.slide-navigation__txt [data-order="1"]');
var mq_medium = window.matchMedia('(min-width: 860px)');
var mq_big = window.matchMedia('(min-width: 1200px)');


function activate_slide(order) {

  var unactiveSlide = $('.slide.active');
  var activeSlide = $('.slides-container [data-order="' + order + '"]');

  if (!activeSlide.hasClass('active')) {
    slide_in(activeSlide);
    slide_out(unactiveSlide);
  }
}

function slide_in(slide) {

  var _this = slide;

  animation_in(slide);
  _this.addClass('active');
  TweenMax.to(_this, 1, { autoAlpha: 1 }, '-=1');

}

function slide_out(slide) {

  var _this = slide;

  _this.css('z-index', '2');
  _this.removeClass('active');
  TweenMax.to(_this, 1, { autoAlpha: 0, onComplete: removeZ });

  function removeZ() {
    _this.css('z-index', '1');
  }

  animation_out(slide);
}

function animation_in(slide) {

  var title = slide.find('h1');
  var subtitle = $(slide).find('h2');
  var text = $(slide).find('p');
  var button = $(slide).find('button');
  var image = $(slide).find('img');

  TweenMax.fromTo(title, 0.6, { autoAlpha: 0, x: 100 }, { autoAlpha: 0.6, x: 0, ease: Power2.easeOut });
  TweenMax.fromTo(subtitle, 0.5, { autoAlpha: 0, x: -200 }, { autoAlpha: 1, x: 0, ease: Power2.easeOut }, '-0.1');
  TweenMax.fromTo(text, 0.8, { autoAlpha: 0, x: 50 }, { autoAlpha: 1, x: 0, ease: Power2.easeOut });
  TweenMax.fromTo(button, 0.5, { autoAlpha: 0 }, { autoAlpha: 1 });
  TweenMax.to(image, 0, { autoAlpha: 1, scale: 1 });
}

function animation_out(slide) {

  var title = slide.find('h1');
  var subtitle = $(slide).find('h2');
  var text = $(slide).find('p');
  var button = $(slide).find('button');
  var image = $(slide).find('img');

  TweenMax.to(title, 0.6, { autoAlpha: 0, x: 0 });
  TweenMax.to(subtitle, 0.5, { autoAlpha: 0, x: 200 });
  TweenMax.to(text, 0.5, { autoAlpha: 0 });
  TweenMax.to(button, 0.5, { autoAlpha: 0 });
  TweenMax.to(image, 1, { scale: 1.1 });

}

$('.slide-navigation__txt span').on('click', function () {

  var _this = $(this);
  var order = _this.data('order');
  var spans = $('.slide-navigation__txt span');
  var current = $('.active').data('order');

  spans.removeClass('active');
  _this.addClass('active');
  activate_slide(order);
  stagger_squares(order, current);
});

function stagger_squares(order, current) {
  var mq = 0.7;
  var moveY;
  var squares = $('.slide-navigation__squares .square');
  var staggerTime = -0.12;

  if (order < current) {
    staggerTime = staggerTime * -1;
  }

  if (mq_medium.matches) {mq = 1;}
  if (mq_big.matches) {mq = 1.3;}



  moveY = (order - 1) * (15 * mq);
  TweenMax.staggerTo(squares, 0.1, { y: moveY }, staggerTime);

}

$(document).ready(function () {

  initialSlide.addClass('active');
  initalSelected.addClass('active');
  TweenMax.to(initialSlide, 0.5, { autoAlpha: 1 });

});
//# sourceURL=pen.js
    </script>
</body>
</html>

4. Image Slider with Masking Effect

Made by balapa. Simplistic CSS Slider with left / right sliding effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
html,
body {
  height: 100%;
  position: relative;
  font-family: Roboto;
  background: #f8f8f8;
}

.slider-ctr {
  width: 700px;
  height: 440px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -220px;
  margin-left: -350px;
  box-sizing: border-box;
  border: 10px solid white;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 10px 15px 3px rgba(0, 0, 0, 0.15), 0 5px 20px 3px rgba(0, 0, 0, 0.1);
}
.slider-ctr:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.6) 100%);
  background: -webkit-linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 9;
}

.slider-control {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: 80px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.15);
  z-index: 99;
}
.slider-control .control {
  width: 50%;
  height: 40px;
  display: block;
  float: left;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  transition: 0.3s all ease;
  background: white;
}
.slider-control .control .icon {
  pointer-events: none;
  transition: 0.3s all ease;
}
.slider-control .control.disabled {
  pointer-events: none;
  background: #ddd;
}
.slider-control .control.disabled .icon {
  opacity: 0.5;
}

.slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: 0.45s all cubic-bezier(0.65, 0.05, 0.36, 1);
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.slide:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.125);
}
.slide.slide-on {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
.slide.text-on .title {
  transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.slide.text-on .author {
  transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.6s;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.slide img {
  display: block;
}
.slide figcaption {
  position: absolute;
  top: 30px;
  left: 30px;
}
.slide .title {
  font-size: 50px;
  margin-bottom: 2px;
  color: white;
  transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%);
  font-weight: 400;
  letter-spacing: 10px;
  text-transform: uppercase;
  position: relative;
}
.slide .author {
  font-size: 16px;
  color: white;
  opacity: 0.8;
  transition: 0.3s all cubic-bezier(0.65, 0.05, 0.36, 1) 0.45s;
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%);
  font-weight: 300;
  letter-spacing: 3px;
  position: relative;
  z-index: 9;
}
</style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
  <div class="slider-ctr">
  <figure class="slide"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/img5.jpeg" alt="Sky"/>
    <figcaption> 
      <div class="title">Sky</div>
      <div class="author">Aleksandra</div>
    </figcaption>
  </figure>
  <figure class="slide"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/img1.jpeg" alt="River"/>
    <figcaption> 
      <div class="title">River</div>
      <div class="author">Ales Krivec</div>
    </figcaption>
  </figure>
  <figure class="slide"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/img4.jpeg" alt="Rain"/>
    <figcaption>
      <div class="title">Rain</div>
      <div class="author">Wilson Lau</div>
    </figcaption>
  </figure>
  <figure class="slide text-on"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/img2.jpeg" alt="Ocean"/>
    <figcaption>
      <div class="title">Ocean</div>
      <div class="author">Rosan Harmens</div>
    </figcaption>
  </figure>
  <div class="slider-control">
    <div class="control prev disabled">
      <div class="icon ion-chevron-left"></div>
    </div>
    <div class="control next">
      <div class="icon ion-chevron-right"></div>
    </div>
  </div>
</div>
  <script src='https://codepen.io/balapa/pen/NNGbJo/c58fffe58d661ae3d4b168a43eb3b2b8.js'></script>
      <script id="rendered-js" >
// buttons
var sliderControl = document.querySelector(".slider-control");

// slides informations
var slides = document.querySelectorAll(".slide"),
slidesLength = slides.length;

// slides array
var slidesArr = [].slice.call(slides);

// reverse array sorting
slidesArr = slidesArr.reverse();

// slide current
var slideCurrent = 0;

sliderControl.addEventListener("click", function (e) {
  target = e.target;

  // get next button
  if (target.classList.contains("next")) {

    next = e.target,
    prev = next.previousElementSibling,
    nextSlide = slidesArr[slideCurrent + 1],
    slide = slidesArr[slideCurrent];

    slide.classList.add("slide-on");
    slide.classList.remove("text-on");
    nextSlide.classList.add("text-on");

    slideCurrent += 1;

    if (slideCurrent > 0) {
      prev.classList.remove("disabled");
    }

    if (slideCurrent === slidesLength - 1) {
      next.classList.add("disabled");
    }
  }

  // get prev button
  if (target.classList.contains("prev")) {

    slideCurrent -= 1;

    prev = e.target,
    next = prev.nextElementSibling,
    prevSlide = slidesArr[slideCurrent + 1],
    slide = slidesArr[slideCurrent];

    prevSlide.classList.remove("text-on");
    slide.classList.remove("slide-on");
    slide.classList.add("text-on");

    if (slideCurrent === slidesLength - 2) {
      next.classList.remove("disabled");
    }

    if (slideCurrent === 0) {
      prev.classList.add("disabled");
    }

  }

});

balapaCop("Image Slider", "#999");
//# sourceURL=pen.js
    </script>
</body>
</html>

5. Prism Effect Slider

Made by Victor. Prism Effect Slider, uses a cool looking prism effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://tympanus.net/Tutorials/PrismEffectSlider/css/demo.css'>
<link rel='stylesheet' href='https://tympanus.net/Tutorials/PrismEffectSlider/css/component.css'>
  
<style>
header{
  height:50px !important;
}
/* Article Layout */
.wrapper {
	width: 100%;
	background: white;
}

.wrapper:after {
	content: '';
	clear: both;
	display: block;
}

.wrapper .copy {
	width: 40%;
	float: left;
	position: relative;
}

.demo-2 .wrapper .copy {
	float: right;
}

.wrapper .copy:before {
	width: 0;
	height: 0;
	float: left;
	padding-bottom: 119%;
	content: '';
}

.wrapper .copy article {
	margin: auto;
	padding: 4vw;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.wrapper .copy h2 {
	margin: 0;
	font-size: 3em;
	font-size: 4vw;
}

.wrapper .copy p:first-of-type {
	color: #b1b6ba;
	font-size: 1.5em;
	font-size: 2vw;
	margin-bottom: 1.5em;
}

.wrapper .prism-slider {
	width: 60%;
	float: right;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.demo-2 .wrapper .prism-slider {
	float: left;
}

/* PrismSlider */
.cache {
	display: none;
}

.prism-slider {
	width: 1200px;
	max-width: 100%;
	height: 0;
	padding-bottom: 48%;
	position: relative;
}

.prism-slider canvas {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.navigation {
	width: 100%;
	position: absolute;
	bottom: 5%;
	text-align: center;
	list-style: none;
	z-index: 1;
}

.navigation li {
	border: 3px solid #eceff1;
	width: 18px;
	height: 18px;
	margin: 0 5px;
	background: #52525a;
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
}

.navigation .active {
	background: #eceff1;
}

/* Media Queries */
@media screen and (max-width: 1024px) {
	.wrapper:after {
		display: none;
	}

	.wrapper .copy, .wrapper .prism-slider {
		width: 100%;
		float: none;
	}

	.wrapper .copy:before {
		display: none;
	}

	.wrapper .copy article {
		position: relative;
		padding: 50px;
		display: block;
	}

	.wrapper .copy h2 {
		font-size: 8vw;
	}

	.wrapper .copy p:first-of-type {
		font-size: 4vw;
	}

	.wrapper .prism-slider {
		padding-bottom: 80%;
	}

	.navigation li {
		width: 24px;
		height: 24px;
	}
}
</style>
</script>
	</head>
	<body class="demo-3">
		<div class="container">
			<header class="codrops-header">
				<h1>Prism Effect Slider</h1>
				
			</header>
			<div class="content">
				<!-- Start Demo -->

				<div class="cache">
					<!-- masks -->
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-a.svg">
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-b.svg">
					<img src="ihttps://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-c.svg">
					<!-- photos -->
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-a.jpg">
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-b.jpg">
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-c.jpg">
					<img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-d.jpg">
				</div>

				<div class="wrapper">
					<div class="prism-slider prism-slider--left">
						<ul class="navigation"></ul>
					</div>
					<div class="copy copy--left">
						<article>
							<h2>Nature Reveals</h2>
							<p>
								Our physical world, respect and explore,
								Where water meets land; a beautiful shore.
							</p>
							<p>
								Mountains we conquer, look down in awe,
								If you're an artist, make sure you draw.
								Nature exciting, adventurously new,
								Much more to see, than a sky that is blue.
								It offers so much, open your eyes,
								Hope of today, with every sunrise.           
							</p>
						</article>
					</div>
				</div>
				<!-- End Demo -->
			</div>	
		</div><!-- /container -->
	</body>
</html>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://tympanus.net/Tutorials/PrismEffectSlider/js/PrismSlider.js'></script>
<script src='https://tympanus.net/Tutorials/PrismEffectSlider/js/utils/easing.js'></script>
<script src='https://tympanus.net/Tutorials/PrismEffectSlider/js/utils/rAF.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
/**
 * The slideshow controller.
 * Get settings and initialise PrismSlider for each layer,
 * add controls and events, then call slideTo method on click.
 * @return {Object} The set of public methods.
 */
var slideshow = function (window, undefined) {

  'use strict';

  /**
   * Enum navigation classes, attributes and
   * provide navigation DOM element container.
   */
  var navigation = {
    selector: '.navigation',
    element: null,
    bullet: 'li',
    attrs: {
      active: 'active',
      index: 'data-index' } };
  /**
   * Enum main element, sizes and provide
   * main DOM element container.
   * @type {Object}
   */
  var container = {
    selector: '.prism-slider',
    element: null,
    sizes: {
      w: 1200,
      h: 960 } };
  /**
   * Set of images to be used.
   * @type {Array}
   */
  var slides = [
  'https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-a.jpg',
  'https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-b.jpg',
  'https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-c.jpg',
  'https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-d.jpg'];


  /**
   * Set of masks with related effects.
   * @type {Array}
   */
  var masks = [
  {
    source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-a.svg',
    effects: {
      flip: 'Y',
      rotate: 167 // degrees
    } },

  {
    source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-b.svg',
    effects: {
      flip: 'X',
      rotate: 90 // degrees
    } },

  {
    source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-c.svg',
    effects: {
      flip: false,
      rotate: 13 // degrees
    } }];
  /**
   * Set global easing.
   * @type {Function(currentTime)}
   */
  var easing = Easing.easeInOutQuint;

  /**
   * Set global duration.
   * @type {Number}
   */
  var duration = 1000;

  /**
   * Container for PrismSlider instances.
   * @type {Object}
   */
  var instances = {};


  /**
   * Init.
   */
  function init() {

    getContainer_();

    initSlider_();

    initPrism_();

    addNavigation_();

    addEvents_();
  }

  /**
   * Get main container element, and store in container element.
   */
  function getContainer_() {
    container.element = document.querySelector(container.selector);
  }


  /**
   * Init Slides.
   * Create and initialise main background slider (first layer).
   * Since we'll use this as main slider no mask is given.
   */
  function initSlider_() {

    instances.slider = new PrismSlider({
      container: container,
      slides: slides,
      mask: false,
      duration: duration,
      easing: easing });


    // Initialise instance.
    instances.slider.init();
  }


  /**
   * Init Masks.
   * Loop masks variable and create a new layer for each mask object.
   */
  function initPrism_() {

    masks.forEach(function (mask, i) {
      // Generate reference name.
      var name = 'mask_' + i;

      instances[name] = new PrismSlider({
        container: container,
        slides: slides,
        mask: mask, // Here is the mask object.
        duration: duration,
        easing: easing });


      // Initialise instance.
      instances[name].init();
    });
  }


  /**
   * Add Navigation.
   * Create a new bullet for each slide and add it to navigation (ul)
   * with data-index reference.
   */
  function addNavigation_() {

    // Store navigation element.
    navigation.element = document.querySelector(navigation.selector);

    slides.forEach(function (slide, i) {

      var bullet = document.createElement(navigation.bullet);

      bullet.setAttribute(navigation.attrs.index, i);

      // When it's first bullet set class as active.
      if (i === 0) bullet.className = navigation.attrs.active;

      navigation.element.appendChild(bullet);
    });
  }

  /**
   * Add Events.
   * Bind click on bullets.
   */
  function addEvents_() {
    // Detect click on navigation elment (ul).
    navigation.element.addEventListener('click', function (e) {

      // Get clicked element.
      var bullet = e.target;

      // Detect if the clicked element is actually a bullet (li).
      var isBullet = bullet.nodeName === navigation.bullet.toUpperCase();

      // Check bullet and prevent action if animation is in progress.
      if (isBullet && !instances.slider.isAnimated) {
        // Remove active class from all bullets.
        for (var i = 0; i < navigation.element.childNodes.length; i++) {if (window.CP.shouldStopExecution(0)) break;
          navigation.element.childNodes[i].className = '';
        }
        // Add active class to clicked bullet.
        window.CP.exitedLoop(0);bullet.className = navigation.attrs.active;

        // Get index from data attribute and convert string to number.
        var index = Number(bullet.getAttribute(navigation.attrs.index));

        // Call slideAllTo method with index.
        slideAllTo_(index);
      }

    });
  }

  /**
   * Call slideTo method of each instance.
   * In order to sync sliding of all layers we'll loop through the
   * instances object and call the slideTo method for each instance.
   * @param {Number} index The index of the destination slide.
   */
  function slideAllTo_(index) {
    // Loop PrismSlider instances.
    for (var key in instances) {
      if (instances.hasOwnProperty(key)) {
        // Call slideTo for current instance.
        instances[key].slideTo(index);
      }
    }
  }
  return {
    init: init };

}(window);
/**
 * Bootstrap slideshow plugin.
 * For demo purposes images are preloaded inside a div hidden with css,
 * the plugin initialisation is delayed through window.onload, in a real life
 * scenario would be better to preload images asynchronously with javascript.
 */
window.onload = slideshow.init;
    </script>
</body>

</html>
 

6. GSAP slider

Made by Goran Vrban. GSAP Slider, a simple and fast paced slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {background-color: #0D1B2B; overflow-x: hidden; font-family: roboto; -webkit-font-smoothing: antialiased; margin: 0;}
.flex { display: -webkit-flex; display: flex; -webkit-flex-direction: row;  flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;}

.slider-wrapper div {position: relative;}
.slider-wrapper {margin-top: 5vw;  margin-left: 11vw;}
.slide-image {height: 24vw;}
.slide-image img {width: 24vw; cursor: pointer;}
.slide-content {width: 25vw; color: #fff; padding:3vw 18vw 3vw 9vw;}
.slide-date {color: #0a8acb; font-size: 1.1vw; font-weight: 400; letter-spacing: 0.1vw; padding-bottom: 1.4vw;}
.slide-title {font-size: 1.2vw; font-weight: 400; letter-spacing: 0.1vw; line-height: 1.55vw; padding-bottom: 1.8vw;}
.slide-text {font-size: 0.80vw; line-height: 1.2vw; opacity: 0.8; padding-bottom: 4vw;}
.slide-more {font-weight: 400; letter-spacing: 0.1vw; float: left; font-size: 0.9vw;}
.slide-bullet {width: 0.5vw; height: 0.5vw; background-color: #0b8bcc; border-radius: 200%; position: relative; margin-left: 1.2vw;}
.slide-nav {margin-left: 64vw; margin-top: -5.5vw;}

div.overlay-blue {width: 100%; height: 100%; position: absolute; top: 0; transition: 0.5s ease all;}
div.overlay-blue:hover {background-color: rgba(13, 27, 43, 0.5);}

.arrows{width: 3.5vw; margin-top: -5.8vw; margin-left: 72vw; position: relative;}
.arrow {display: inline-block; position: absolute; width: 1.2vw; height: 1.2vw; background: transparent; text-indent: -9999px; border-top: 0.15vw solid #fff; border-left: 0.15vw solid #fff; transition: all .1s ease-in-out; text-decoration: none; color: transparent;
}
.arrow:hover {border-color: #0A8ACB; border-width: 0.25vw;
}
.arrow:before {display: block; height: 200%; width: 200%; margin-left: -50%; margin-top: -50%; content: ""; transform: rotate(45deg);}
.arrow.prev {transform: rotate(-45deg); left: 0;}
.arrow.next {transform: rotate(135deg); right: 0;}
</style>
</head>

<body translate="no" >
  <div class="slider">
<div class="slider-wrapper flex">
	<div class="slide flex">
		<div class="slide-image slider-link prev"><img src="https://goranvrban.com/codepen/img2.jpg"><div class="overlay"></div></div>
		<div class="slide-content">
			<div class="slide-date">30.07.2017.</div>
			<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
			<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex. </div>
			<div class="slide-more">READ MORE</div>
		</div>	
	</div>
	<div class="slide flex">
		<div class="slide-image slider-link next"><img src="https://goranvrban.com/codepen/img3.jpg"><div class="overlay"></div></div>
		<div class="slide-content">
			<div class="slide-date">30.08.2017.</div>
			<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
			<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex. </div>
			<div class="slide-more">READ MORE</div>
		</div>	
	</div>	
	<div class="slide flex">
		<div class="slide-image slider-link next"><img src="https://goranvrban.com/codepen/img5.jpg"><div class="overlay"></div></div>
		<div class="slide-content">
			<div class="slide-date">30.09.2017.</div>
			<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
			<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex. </div>
			<div class="slide-more">READ MORE</div>
		</div>	
	</div>
		<div class="slide flex">
		<div class="slide-image slider-link next"><img src="https://goranvrban.com/codepen/img6.jpg"><div class="overlay"></div></div>
		<div class="slide-content">
			<div class="slide-date">30.10.2017.</div>
			<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
			<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex. </div>
			<div class="slide-more">READ MORE</div>
		</div>	
	</div>
</div>
<div class="arrows">
<a href="#" title="Previous" class="arrow slider-link prev"></a>
<a href="#" title="Next" class="arrow slider-link next"></a>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
      <script id="rendered-js" >
(function ($) {

  $(document).ready(function () {

    var s = $('.slider'),
    sWrapper = s.find('.slider-wrapper'),
    sItem = s.find('.slide'),
    btn = s.find('.slider-link'),
    sWidth = sItem.width(),
    sCount = sItem.length,
    slide_date = s.find('.slide-date'),
    slide_title = s.find('.slide-title'),
    slide_text = s.find('.slide-text'),
    slide_more = s.find('.slide-more'),
    slide_image = s.find('.slide-image img'),
    sTotalWidth = sCount * sWidth;

    sWrapper.css('width', sTotalWidth);
    sWrapper.css('width', sTotalWidth);

    var clickCount = 0;

    btn.on('click', function (e) {
      e.preventDefault();

      if ($(this).hasClass('next')) {

        clickCount < sCount - 1 ? clickCount++ : clickCount = 0;
      } else if ($(this).hasClass('prev')) {

        clickCount > 0 ? clickCount-- : clickCount = sCount - 1;
      }
      TweenMax.to(sWrapper, 0.4, { x: '-' + sWidth * clickCount });


      //CONTENT ANIMATIONS

      var fromProperties = { autoAlpha: 0, x: '-50', y: '-10' };
      var toProperties = { autoAlpha: 0.8, x: '0', y: '0' };

      TweenLite.fromTo(slide_image, 1, { autoAlpha: 0, y: '40' }, { autoAlpha: 1, y: '0' });
      TweenLite.fromTo(slide_date, 0.4, fromProperties, toProperties);
      TweenLite.fromTo(slide_title, 0.6, fromProperties, toProperties);
      TweenLite.fromTo(slide_text, 0.8, fromProperties, toProperties);
      TweenLite.fromTo(slide_more, 1, fromProperties, toProperties);

    });

  });
})(jQuery);

$('.overlay').addClass('overlay-blue');
    </script>
</body>
</html>
 

7. Fullscreen Hero Image Slider

Made by Tobias Bogliolo. Hero image Slider, clicking the red arrow buttons changes the background image, but not the description card. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
/* Global */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html,
body,
.container {
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  /* Font styles */
  font-family: 'Roboto Slab', serif;
  font-size: 1em;
  line-height: 1.5em;
  color: #607D8B;
  letter-spacing: .01em;
}

.container {
  position: relative;
}

/* Panels */
.swipe {
  position: relative;
  width: 100%;
  height: 100%; /* "min-height" doesn't work on Firefox. */
  background: #eee;
  overflow-x: hidden;
}

.panel {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  padding: 20px;
}

.left {
  left: -100%;
}

.right {
  left: 100%;
}

/* Info */
.info {
  position: absolute;
  width: 80%;
  max-width: 500px;
  bottom: 20%;
  right: 10%;
  pointer-events: none;
}

.inner {
  position: relative;
  padding: 1.66em 3em;
  background: #FFFFFF;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.info:before {
  content: "";
  position: absolute;
  width: 65%;
  height: 80%;
  top: 0;
  left: 0;
  -webkit-transform: translate(-10px, -10px);
  -ms-transform: translate(-10px, -10px);
  -o-transform: translate(-10px, -10px);
  transform: translate(-10px, -10px);
  background: #E91E63;
  background: #3F51B5;
}

.buttons {
  position: absolute;
  bottom: -50px;
  right: 5%;
  pointer-events: all;
}

.buttons button {
  transition: ease .4s;
}

.btn-prev,
.btn-next {
  width: 60px;
  height: 60px;
  margin-left: 10px;
  border: none;
  outline: none;
  border-radius: 60px;
  color: #FFFFFF;
  background: -webkit-linear-gradient(top, #F5515F, #E91E63);
  background: linear-gradient(to bottom, #F5515F, #E91E63);
  box-shadow: 0px 3px 15px 2px rgba(245,81,95,.8);
  cursor: pointer;
}

.buttons button:hover {
  box-shadow: 0px 3px 30px 3px rgba(245,81,95,.8);
}

.buttons button:disabled {
  box-shadow: 0px 1px 5px 0px rgba(245,81,95,.8);
  background: -webkit-linear-gradient(top, #E91E63, #F5515F);
  background: linear-gradient(to bottom, #E91E63, #F5515F);
  cursor: default;
}

/* Optional content */
.optional {
  width: 80%;
  max-width: 680px;
  margin: 6em auto;
  padding: 2em 3em;
  box-shadow: 
    0 3px 12px rgba(0,0,0,0.16), 
    0 3px 12px rgba(0,0,0,0.23);
}

@media (max-width: 620px) {
  body {
    font-size: 13px;
    line-height: 1.5em;
  }
  .info {
    position: absolute;
    width: 100%;
    max-width: 100%;
    bottom: 0;
    right: 0;
  }

  .inner {
    padding: .5em 1.5em;
    box-shadow: none;
  }
  
  .buttons {
    display: none;
  }
}
</style>
</head>
<body>
  <div class="container">

  <!-- Panels -->
  <div class="swipe">
    <div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/1%20-%20Landscape%201_o.jpg"></div>
    <div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/1%20-%20Landscape%208_o.jpg"></div>
    <div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/1%20-%20Landscape%209_o.jpg"></div>
    <div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/2-%20Arquitectura%205_o.jpg"></div>
    <div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/3%20-%20Interiores%201_o.jpg"></div>
  </div>

  <!-- Info -->
  <div class="info">
    <div class="inner">
      <h3>Simply swipe on any device!</h3>
      <p>Use this buttons or your fingers. No matter what you do, no matter which device you choose, the picture will swipe and swipe again!</p>
    </div>
    <div class="buttons">
      <button class="btn-prev" disabled>&larr;</button>
      <button class="btn-next">&rarr;</button>
    </div>
  </div>

</div>

<!-- 
==================
==================
Optional Content 
==================
==================
<div class="optional">  
  <h3>Lorem ipsum dolor sit amet.</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus asperiores natus minus ab sit. Ipsum iste, doloribus suscipit ducimus ea repudiandae consequatur soluta repellat saepe fuga, velit odit odio facilis, at sunt quis quo molestias quae. Ullam nisi, error facilis nobis maxime numquam quaerat, voluptatibus sit debitis ea quasi incidunt?</p>
</div>
-->

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script id="rendered-js" >
/*
===============================================================

Hi! Welcome to my little playground!

My name is Tobias Bogliolo. 'Open source' by default and always 'responsive',
I'm a publicist, visual designer and frontend developer based in Barcelona. 

Here you will find some of my personal experiments. Sometimes usefull,
sometimes simply for fun. You are free to use them for whatever you want 
but I would appreciate an attribution from my work. I hope you enjoy it.

===============================================================
*/
$(document).ready(function () {

  //Swipe speed:
  var tolerance = 100; //px.
  var speed = 650; //ms.

  //Elements:
  var interactiveElements = $('input, button, a');
  var itemsLength = $('.panel').length;
  var active = 1;

  //Background images:
  for (i = 1; i <= itemsLength; i++) {if (window.CP.shouldStopExecution(0)) break;
    var $layer = $(".panel:nth-child(" + i + ")");
    var bgImg = $layer.attr("data-img");
    $layer.css({
      "background": "url(" + bgImg + ") no-repeat center / cover" });

  }window.CP.exitedLoop(0);;

  //Transitions:
  setTimeout(function () {
    $(".panel").css({
      "transition": "cubic-bezier(.4,.95,.5,1.5) " + speed + "ms" });

  }, 200);

  //Presets:
  $(".panel:not(:first)").addClass("right");

  //Swipe:
  function swipeScreen() {
    $('.swipe').on('mousedown touchstart', function (e) {

      var touch = e.originalEvent.touches;
      var start = touch ? touch[0].pageX : e.pageX;
      var difference;

      $(this).on('mousemove touchmove', function (e) {
        var contact = e.originalEvent.touches,
        end = contact ? contact[0].pageX : e.pageX;
        difference = end - start;
      });

      //On touch end:
      $(window).one('mouseup touchend', function (e) {
        e.preventDefault();

        //Swipe right:
        if (active < itemsLength && difference < -tolerance) {
          $(".panel:nth-child(" + active + ")").addClass("left");
          $(".panel:nth-child(" + (active + 1) + ")").removeClass("right");
          active += 1;
          btnDisable();
        };

        // Swipe left:
        if (active > 1 && difference > tolerance) {
          $(".panel:nth-child(" + (active - 1) + ")").removeClass("left");
          $(".panel:nth-child(" + active + ")").addClass("right");
          active -= 1;
          btnDisable();
        };

        $('.swipe').off('mousemove touchmove');
      });

    });
  };
  swipeScreen();

  //Prevent swipe on interactive elements:
  interactiveElements.on('touchstart touchend touchup', function (e) {
    e.stopPropagation();
  });

  //Buttons:
  $(".btn-prev").click(function () {
    // Swipe left:
    if (active > 1) {
      $(".panel:nth-child(" + (active - 1) + ")").removeClass("left");
      $(".panel:nth-child(" + active + ")").addClass("right");
      active -= 1;
      btnDisable();
    };
  });

  $(".btn-next").click(function () {
    //Swipe right:
    if (active < itemsLength) {
      $(".panel:nth-child(" + active + ")").addClass("left");
      $(".panel:nth-child(" + (active + 1) + ")").removeClass("right");
      active += 1;
      btnDisable();
    };
  });

  function btnDisable() {
    if (active >= itemsLength) {
      $(".btn-next").prop("disabled", true);
      $(".btn-prev").prop("disabled", false);
    } else
    if (active <= 1) {
      $(".btn-prev").prop("disabled", true);
      $(".btn-next").prop("disabled", false);
    } else
    {
      $(".btn-prev, .btn-next").prop("disabled", false);
    };
  };

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

8. Slider

Made by Vivek Tiwari. Simple Slider with fade in and fade out effect. Source

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta lang="en">
<meta name="description" content="A beautiful fade in and fade out animation slider with couple of random images">
<title>Cool Slider</title>

<style>
body {
    
}

footer{
    padding:10px;
    position:relative;
    width:96%;
    background-color:teal;
    color:lightcyan;
    border-left:4px solid cyan;
    font-weight:800;
    margin-left:0px;
    border-radius:10px;
}

img{

width:100%;

border:2px;

border-radius:10px;

animation:fadeEffect 0.5s ease-in-out;

}

.aa:hover .prev{

opacity:0.5;

animation:clickme 0.5s;

}

.aa:hover .next{

opacity:0.5;

animation:clickme 0.5s;

}

.main-slide-container{

padding:5px;

}

.main-slide-container .next{

animation:clickme 0.1s;

}

.main-slide-container .prev{

animation:clickme 0.1s;

}

.prev{

border:2px;

border-radius:50%;

padding:20px;

font-family:sans-serif;

font-weight:1000;

outline:none;

transition-duration:0.2s;

position:absolute;

top:50%;

left:15px;

transform:translate(0%, -50%);

opacity:0.0;

}

.next{

border:2px;

border-radius:50%;

padding:20px;

font-family:sans-serif;

font-weight:1000;

outline:none;

transition-duration:0.2s;

position:absolute;

top:50%;

right:15px;

transform:translate(0%, -50%);

opacity:0.0;

}

.prev:hover{

background-color:#0b7c7c;

color:white;

}

.prev:active{

background-color:#0fa8a8;

color:white;

}

.next:hover{

background-color:#0b7c7c;

color:white;

}

.next:active{

background-color:#0fa8a8;

color:white;

}

@keyframes fadeEffect{

from{

opacity:0;

transform:scale(0.9,0.9);

overflow:hidden;

}

to{

opacity:1;

overflow:hidden;

}

}

@keyframes fadeEffectOut{

from{

opacity:1;

overflow:hidden;

}

to{

opacity:0;

transform:scale(0.9,0.9);

overflow:hidden;

}

}

.fdout{

animation:fadeEffectOut 0.15s;

}

@keyframes clickme{

0%{}

50%{opacity:1;}

60%{opacity:0.4;}

100%{}

}

</style>

</head>

<body>

<div>

<p style="font-family:sans-serif; font-size:45px; text-align:center;" class="header">Slider</p>

<div style="width:100%;position:relative; height:100%;" class="aa">

<img src="https://cdn.pixabay.com/photo/2018/06/10/17/40/olives-3466908_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2018/06/24/18/46/dovetail-3495224_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2018/06/12/01/04/road-3469810_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2012/08/27/14/19/evening-55067_960_720.png" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2018/06/24/03/06/ship-3493887_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2014/09/20/13/52/board-453758_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2016/11/18/13/53/idol-1834688_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2015/12/06/04/31/indian-flag-1079100_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2016/01/17/02/07/cctv-1144366_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2018/06/09/22/56/peacock-3465442_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2016/05/10/14/05/raspberry-pi-1383832_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2014/05/02/21/50/home-office-336378_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_960_720.jpg" alt="" class="slide"/>

<img src="https://cdn.pixabay.com/photo/2016/02/13/12/26/aurora-1197753_960_720.jpg" alt="" class="slide"/>

<button class="prev">&#x2190;</button>

<button class="next">&#x2192;</button>

</div>

</div>


<br>
<br>
<br>
<br>
<footer>
    Tip: You can try modifying the effects, change it according to you. just search for fadeEffect keyframes in the css.
    Please choose resolution perfect images, otherwise the layout can break.
</footer>


<script>

// Adding next function event listener to the class next

document.getElementsByClassName("prev")[0].addEventListener("click", prev);

// Adding prev function event listener to the class prev

document.getElementsByClassName("next")[0].addEventListener("click", next);

// Capabilities starts here

var s = 1; // Master variable for slideshow

slideshow(s); // The function call when the whole page loads

// Next Function Starts Here

function next(){

    s = s+1;

    slideshow(s);

}

// Previous Function Starts Here 

function prev(){

    s = s-1;

    slideshow(s);

}

// Slideshow function starts here 

function slideshow(n){

    // Getting all the elements with class "slide"

    var slides = document.querySelectorAll(".slide");

    

    

    // statement in which the master variable will initialized to 1 if it is greater than the number of length returned by the class (node-list) of slide elements.

    if(s>slides.length){s = 1} // initializing the value of s = 1 is it is greater than

    // statement in which the master variable will be initialized to the total number of node-list i.e class of elements if it is less than one. Reason is if it gets to 0 then the display none property will recognise it as -1.

    if(s < 1){ s = slides.length }

    

    

    // for loop for adding out animation before displaying every image to none

    for(var i = 0; i<slides.length; i++){

        slides[i].classList.add("fdout");

    }

    // the function that will wait for 0.4 seconds which will give the animation its performance time to do.

    window.setTimeout(function(){

    

    // The important for loop which will hide or displays none to all elements while removing the out animation class or removing the out effect.

    for(var i = 0; i<slides.length; i++){

        slides[i].classList.remove("fdout");

        slides[i].style.display = "none";

    }

// The final action which will display the element by index number of master variable i.e s = slide (class or node-list).

    slides[s-1].style.display = "block";

    },90);

}

// The criticle actions for slider ends here that will be performed by user action i.e mouse clicks

// ==============

// Automatic slideshow section

// Variable initialization to interval time object 

var timeint = setInterval(function(){

    s = s+1;

    slideshow(s);

}, 6000);

// function that will abandon the time intervals

function aa(){

    clearInterval(timeint);

}

// function that will adopt the time intervals

function as(){

    timeint = setInterval(function(){

    s = s+1;

    slideshow(s);

}, 6000);

}

// Asigning the user mouse over and out event in which the interval will start and stop.

document.getElementsByClassName("aa")[0].addEventListener("mouseover", aa);

document.getElementsByClassName("aa")[0].addEventListener("mouseout", as);

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

9. K-Drama Slider

Made by Man Of Action. K-Drama Themed CSS Slider, the slides changes automatically and can be changed manually also. Source

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Blood Coders</title>

  <!-- JQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- Bootstrap.min.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />


  <!-- Bootstrap.min.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>


  <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="slider">

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
        <li data-target="#myCarousel" data-slide-to="5"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <div class="title"> Sweet Revenge</div>
          <img src="https://thebloodcoders.github.io/resources/images/Sweet_Revenge.jpg" alt="Sweet Revenge">
        </div>

        <div class="item">
          <div class="title"> Sweet Revenge 2</div>
          <img src="https://thebloodcoders.github.io/resources/images/sweet-revenge-s2.png" alt="Sweet Revenge 2">
        </div>

        <div class="item">
          <div class="title"> Closer to You </div>
          <img src="https://thebloodcoders.github.io/resources/images/closer-to-you.jpg" alt="Close to You ">
        </div>

        <div class="item">
          <div class="title"> True Beauty </div>
          <img src="https://thebloodcoders.github.io/resources/images/true-beauty-2020.png" alt=" True Beauty ">
        </div>

        <div class="item">
          <div class="title"> Start-Up </div>
          <img src="https://thebloodcoders.github.io/resources/images/sandbox.png" alt="Start-Up ">
        </div>

        <div class="item">
          <div class="title"> Dr John </div>
          <img src="https://thebloodcoders.github.io/resources/images/Doctor+John.jpg" alt=" Dr John ">
        </div>

      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

  </div>

  <!--  YouTube Style  -->
  <a href="https://www.youtube.com/watch?v=SkA4hc1gB70" class="the-blood-coders__learn-it-btn" target="_blank">
    <i class="ri-youtube-fill the-blood-coders__btn-icon"></i>
    Learn it
  </a>


  <div class="the-blood-coders__backdrop">
    <div class="the-blood-coders__popup">
      <a href="https://www.youtube.com/watch?v=SkA4hc1gB70" class="the-blood-coders__popup-header" target="_blank">
        <i class="ri-youtube-fill the-blood-coders__btn-icon"></i>TheBloodCoders
      </a>

      <h1 class="the-blood-coders__code-name">
        <span class="the-blood-coders__code-name--span"> K-Drama Slider
      </h1>

      <a href="https://www.youtube.com/watch?v=SkA4hc1gB70" class="the-blood-coders__link"
        target="_blank">https://www.youtube.com/watch?v=SkA4hc1gB70</a>
      <a href="#" class="the-blood-coders__ok-btn">Ok</a>
    </div>
  </div>

  <script>
    const btnOk = document
      .querySelector('.the-blood-coders__ok-btn');

    btnOk.addEventListener('click', (e) => {
      e.target.closest('.the-blood-coders__backdrop').remove();
    });
  </script>
  <style>
      
body{
    position:fixed;
    height:100%;
    width:100%;
}

.carousel-indicators{
  position: absolute;
  bottom: 0;
  left: 80%;
}

.carousel-inner .item img{
  height: 100vh;
  width: 100%;
  object-fit: cover;
}

.carousel-inner .item .title{
  position: absolute;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  padding-top: 1rem;
  width: 100%;
  height: 8rem;
  bottom: 0rem;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.8);
}


/* YouTube Style */
.the-blood-coders__learn-it-btn,
.the-blood-coders__learn-it-btn:link,
.the-blood-coders__learn-it-btn:active,
.the-blood-coders__learn-it-btn:visited {
  padding: 0.5rem 0;
  background-color: #ff0000;
  position: absolute;
  width: 120px;
  bottom: 0;
  color: #fff;
  font-family: "Poppins", sans-serif;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
          justify-content: center;
  font-weight: 400;
  -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  left: 0;
}

.the-blood-coders__btn-icon {
  font-size: 1.6em;
  margin-right: 0.5rem;
}

.the-blood-coders__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.644);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.the-blood-coders__popup {
  width: 30rem;
  background-color: white;
  padding: 1rem;
  border-radius: 4px;
  font-family: "Poppins", sans-serif;
  text-align: center;
  -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}

.the-blood-coders__popup-header,
.the-blood-coders__popup-header:link,
.the-blood-coders__popup-header:visited {
  font-size: 1.2em;
  font-weight: 600;
  margin-top: -2.6rem;
  margin-bottom: 2rem;
  background-image: -webkit-gradient(linear, left bottom, right top, from(#e90606), to(#ff4a4a));
  background-image: linear-gradient(to right top, #e90606, #ff4a4a);
  color: #f1f1f1;
  padding: 0.5rem 1rem;
  width: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 1px;
  -webkit-transform: skew(-10deg) rotate(-3deg);
          transform: skew(-10deg) rotate(-3deg);
  -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
}

.the-blood-coders__code-name {
  font-size: 1.2em;
  margin-bottom: 1rem;
}

.the-blood-coders__code-name--span {
  background-image: -webkit-gradient(linear, left bottom, right top, from(#400164), to(#9c27e0));
  background-image: linear-gradient(to right top, #400164, #9c27e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.the-blood-coders__link {
  word-break: break-all;
  line-height: 1.4;
  display: block;
  color: #1d1dfa;
  margin-bottom: 1.2rem;
}

.the-blood-coders__ok-btn,
.the-blood-coders__ok-btn:link,
.the-blood-coders__ok-btn:active,
.the-blood-coders__ok-btn:visited {
  text-transform: uppercase;
  margin-top: 1rem;
  display: inline-block;
  padding: 0.5rem 2.5rem;
  color: #ffffff;
  background-image: -webkit-gradient(linear, left top, right top, from(#400164), to(#9c27e0));
  background-image: linear-gradient(to right, #400164, #9c27e0);
  font-family: "Poppins", sans-serif;
  text-decoration: none;
  font-weight: 400;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: skew(-10deg) rotate(-3deg);
          transform: skew(-10deg) rotate(-3deg);
  -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
</style>
</body>
</html>

10. Pure css slider

Made by Kamil. Just a simple slider, clicking the buttons at the bottom changes the slides. Source

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8"> 
<style>
body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
}

input {
  position: absolute;  
  opacity: 0;
  margin-top: 95vh;
  cursor: pointer;
}

label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: solid 2px white;
  border-radius: 999px;
  background-color: transparent;
  margin: 95vh 6px 0 6px;
  z-index: 2;
  cursor: pointer;
  transition-duration: .4s;
}

input:checked + label{
  background-color: white;
}

input:focus + label{
  box-shadow: 0 0 0 2px teal, 0 0 18px white;
}

.slide {
  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transform: translateX(-100%);
  transition-duration: .4s;
  opacity: 1;
}

input:checked ~ .slide {
  transform: translateX(100%);
}

input:checked + label + .slide {
  transform: translateX(0);
  opacity: 1;
}

.bg1{
  background-image: url(https://images.unsplash.com/photo-1422806310414-91469fe4977e?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=114e7a73b2385128045a5555b981e939);
}
.bg2{
  background-image: url(https://images.unsplash.com/photo-1490020641477-3b0e96306b9a?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=d8358f021c68f49335fe44b10f70b700);
}
.bg3{
  background-image: url(https://images.unsplash.com/photo-1512529111457-3e8a595ef8e9?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=9b3ab76b65a358830d60ca43be76f2e1);
}
.bg4{
  background-image: url(https://images.unsplash.com/photo-1504700610630-ac6aba3536d3?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=92d2cae094fb24e5266221828ee251e2);
}
.bg5{
  background-image: url(https://images.unsplash.com/reserve/wPCyys8TPCHY3GXm2N2D_ssp_inthewoods_1.jpg?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=654d988a19f43ca9ac27f2eacbe2a554);
}
</style>
</head>

<body translate="no" >
  <input type="radio" id="trigger1" name="slider">
<label for="trigger1"></label>
<div class="slide bg1"></div>

<input type="radio" id="trigger2" name="slider" checked autofocus>
<label for="trigger2"></label>
<div class="slide bg2"></div>

<input type="radio" id="trigger3" name="slider">
<label for="trigger3"></label>
<div class="slide bg3"></div>

<input type="radio" id="trigger4" name="slider">
<label for="trigger4"></label>
<div class="slide bg4"></div>

<input type="radio" id="trigger5" name="slider">
<label for="trigger5"></label>
<div class="slide bg5"></div>

<a target="_blank" href="https://twitter.com/kamildyrek"><svg style="width:2em;height:2em;position:fixed;top:1em;left:1em;opacity:.8;" viewBox="0 0 24 24"><path fill="#fff" d="M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" /></svg></a>

</body>
</html>

11. Slider Transition (WIP)

Made by BryanE. CSS Slider with slide down animations. Source

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

<style>
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
body {
  font-family: "Lato";
  color: #d6f9dd;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.caption {
  position: absolute;
  top: 50%;
  left: 8rem;
  z-index: 9;
  transform: translateY(-50%);
  opacity: 0;
  transition: 500ms ease opacity, 500ms ease transform;
  transform: translateY(60px);
}
.caption.current-caption {
  transition-delay: 1000ms;
  opacity: 1;
  transform: translateY(0);
}
.caption.previous-caption {
  transform: translateY(-60px);
}
.caption .caption-heading {
  transition: 500ms ease-in all;
}
.caption .caption-heading h1 {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  text-indent: -0.2rem;
  letter-spacing: 0.2rem;
  font-weight: 300;
}
.caption .caption-subhead {
  font-size: 1rem;
  font-weight: 300;
  text-transform: uppercase;
  color: white;
  letter-spacing: 4px;
  word-spacing: 0.1rem;
  margin-bottom: 2.5rem;
  display: block;
}
.caption a.btn {
  color: #333;
  font-size: 0.8rem;
  text-decoration: none;
  background-color: white;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  position: relative;
  z-index: 9;
  transition: 250ms ease-in background-color, 500ms ease-in color;
}
.caption a.btn:hover {
  background-color: black;
  color: white;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #2C302E;
  display: flex;
  position: relative;
}

.left-col, .right-col {
  width: 100%;
  box-sizing: border-box;
  height: calc(100% - 4rem);
  overflow: hidden;
}

.left-col {
  background-size: cover;
  background-postion: center top;
  overflow: hidden;
  margin: 2rem;
  position: relative;
}
.left-col .slide {
  filter: grayscale(100%);
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: left top !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  opacity: 0;
  transition: 1000ms cubic-bezier(1, 0.04, 0.355, 1) transform, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) clip-path;
  transform: translateY(-100%);
  scale: 1;
  z-index: -1;
}
.left-col .slide.previous {
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
  animation-delay: 1s;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: 3s ease transform;
  will-change: transform;
}
.left-col .slide.previous.change {
  transform: translateY(50%);
}
.left-col .slide.next {
  transform: translateY(-100%);
  z-index: 3;
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.left-col .slide.current {
  opacity: 1;
  transform: translateY(0) scale(1.25);
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.right-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-col .preview {
  max-width: 400px;
}

.nav {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  overflow: hidden;
}
.nav a {
  color: #fafafa;
  font-size: 3rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}
.nav:hover .slide-up, .nav:hover .slide-down {
  opacity: 0.5;
  transform: translateX(0);
}
.nav .slide-up, .nav .slide-down {
  display: block;
  position: absolute;
  text-align: center;
  padding: 1rem;
  opacity: 0;
  transition: 0.25s ease opacity, 0.25s ease transform;
  z-index: 99;
}
.nav .slide-up:hover, .nav .slide-down:hover {
  opacity: 1;
}
.nav .slide-up a, .nav .slide-down a {
  text-decoration: none;
  font-weight: 300 !important;
}
.nav .slide-up {
  top: 50%;
  left: 0;
  transform: translateX(-100%);
}
.nav .slide-down {
  top: 50%;
  right: 0;
  transform: translateX(100%);
}
</style>
</head>
<body>
  <div class="container" id="container">
  <div class="caption" id="slider-caption">
    <div class="caption-heading">
      <h1>Lorem Ipsum</h1>
    </div>
    <div class="caption-subhead"><span>dolor sit amet, consectetur adipiscing elit. </span></div><a class="btn" href="#">Sit Amet</a>
  </div>
  <div class="left-col" id="left-col">
    <div id="left-slider"></div>
  </div>
  <ul class="nav">
    <li class="slide-up"> <a href="#"><</a></li>
    <li class="slide-down"> <a id="down_button" href="#">></a></li>
  </ul>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script id="rendered-js" >
let slide_data = [
{
  'src': 'https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&s=d40582dbbbb66c7e0812854374194c2e&auto=format&fit=crop&w=1050&q=80',
  'title': 'Slide 1',
  'copy': 'DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.' },

{
  'src': 'https://images.unsplash.com/photo-1496309732348-3627f3f040ee?ixlib=rb-0.3.5&s=4d04f3d5a488db4031d90f5a1fbba42d&auto=format&fit=crop&w=1050&q=80',
  'title': 'Slide 2',
  'copy': 'DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.' },

{
  'src': 'https://images.unsplash.com/photo-1504271863819-d279190bf871?ixlib=rb-0.3.5&s=7a2b986d405a04b3f9be2e56b2be40dc&auto=format&fit=crop&w=334&q=80',
  'title': 'Slide 3',
  'copy': 'DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.' },

{
  'src': 'https://images.unsplash.com/photo-1478728073286-db190d3d8ce6?ixlib=rb-0.3.5&s=87131a6b538ed72b25d9e0fc4bf8df5b&auto=format&fit=crop&w=1050&q=80',
  'title': 'Slide 4',
  'copy': 'DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.' }];



let slides = [],
captions = [];

let autoplay = setInterval(function () {
  nextSlide();
}, 5000);
let container = document.getElementById('container');
let leftSlider = document.getElementById('left-col');
// console.log(leftSlider);
let down_button = document.getElementById('down_button');
// let caption = document.getElementById('slider-caption');
// let caption_heading = caption.querySelector('caption-heading');

down_button.addEventListener('click', function (e) {
  e.preventDefault();
  clearInterval(autoplay);
  nextSlide();
  autoplay;
});

for (let i = 0; i < slide_data.length; i++) {
  let slide = document.createElement('div'),
  caption = document.createElement('div'),
  slide_title = document.createElement('div');

  slide.classList.add('slide');
  slide.setAttribute('style', 'background:url(' + slide_data[i].src + ')');
  caption.classList.add('caption');
  slide_title.classList.add('caption-heading');
  slide_title.innerHTML = '<h1>' + slide_data[i].title + '</h1>';

  switch (i) {
    case 0:
      slide.classList.add('current');
      caption.classList.add('current-caption');
      break;
    case 1:
      slide.classList.add('next');
      caption.classList.add('next-caption');
      break;
    case slide_data.length - 1:
      slide.classList.add('previous');
      caption.classList.add('previous-caption');
      break;
    default:
      break;}

  caption.appendChild(slide_title);
  caption.insertAdjacentHTML('beforeend', '<div class="caption-subhead"><span>dolor sit amet, consectetur adipiscing elit. </span></div>');
  slides.push(slide);
  captions.push(caption);
  leftSlider.appendChild(slide);
  container.appendChild(caption);
}
// console.log(slides);

function nextSlide() {
  // caption.classList.add('offscreen');

  slides[0].classList.remove('current');
  slides[0].classList.add('previous', 'change');
  slides[1].classList.remove('next');
  slides[1].classList.add('current');
  slides[2].classList.add('next');
  let last = slides.length - 1;
  slides[last].classList.remove('previous');

  captions[0].classList.remove('current-caption');
  captions[0].classList.add('previous-caption', 'change');
  captions[1].classList.remove('next-caption');
  captions[1].classList.add('current-caption');
  captions[2].classList.add('next-caption');
  let last_caption = captions.length - 1;

  // console.log(last);
  captions[last].classList.remove('previous-caption');

  let placeholder = slides.shift();
  let captions_placeholder = captions.shift();
  slides.push(placeholder);
  captions.push(captions_placeholder);
}

let heading = document.querySelector('.caption-heading');


// https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/
function whichTransitionEvent() {
  var t,
  el = document.createElement("fakeelement");

  var transitions = {
    "transition": "transitionend",
    "OTransition": "oTransitionEnd",
    "MozTransition": "transitionend",
    "WebkitTransition": "webkitTransitionEnd" };


  for (t in transitions) {
    if (el.style[t] !== undefined) {
      return transitions[t];
    }
  }
}

var transitionEvent = whichTransitionEvent();
caption.addEventListener(transitionEvent, customFunction);

function customFunction(event) {
  caption.removeEventListener(transitionEvent, customFunction);
  console.log('animation ended');

  // Do something when the transition ends
}
    </script>

</body>
</html>

12. 3D slider

Made by Lazizbek. 3d slider, using your mouse you can grab the cube and move it right or left to change slides. Source

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>

<body>
 
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">1</div>
      <div class="swiper-slide">2</div>
      <div class="swiper-slide">3</div>
      <div class="swiper-slide">4</div>
      
    </div>

    <div class="swiper-pagination"></div>
  </div>
  
  <script>
      var swiper = new Swiper('.swiper-container', {
      effect: 'cube',
      grabCursor: true,
      cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 40,
        shadowScale: 1,
      },
      pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>
  <style>
      html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #ffe;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 300px;
      height: 300px;
      position: absolute;
      transform:translate(10%,50%);
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      background:#098;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:200px;
    }
      </style>
</body>

</html>

13. Image Slider

Made by Talal Emran. A simple slider. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div id="wrapper">
            <h1>Image Slider</h1>
            <img id="slider" src="https://cdn.pixabay.com/photo/2016/01/08/11/57/butterflies-1127666__480.jpg"/>
            <button id="next" onclick="next()"> < </button>
            <button id="prev" onclick="prev()"> > </button>
            <p>Please, if you like my work don't forget to follow me.</p>
            <p id="footer">Built with &hearts; By Talal Emran, 2021.</p>
        </div>
        <style>
            body {
    background-color: #5E2BFF;
    padding-top: 100px;
    font-family: Tahoma;
}

#wrapper {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    padding: 5px;
    background-color: #FC6DAB;
    box-shadow: 3px 3px 3px #000000;
}

h1 {
    text-align: center;
    font-size: 22px;
    color: #F7F6C5;
}

p { text-align: center;
    color: #F3FAE1;

}

button {
    /*border-radius: 50%;*/
    border: none;
    font-size: 20px;
    padding: 5px 10px;
    position: relative;
    top: -110px;
    opacity: 25%;
    background-color: #5E2BFF;
    color: #F7F6C5;
}

#next {
    float: left;
    position: relative;
    left: 10px;
}

#prev {
    float: right;
    position: relative;
    right: 10px;
}
img {
    width: 300px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    filter: saturate(50%) contrast(-25%);
}

#footer {
    clear: both;
    text-align: center;
    padding-top: 10px;
}
            </style>
            <script>
                 let images = [
    'https://cdn.pixabay.com/photo/2016/01/08/11/57/butterflies-1127666__480.jpg', 
    'https://cdn.pixabay.com/photo/2016/07/11/15/43/woman-1509956__340.jpg', 
    'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg' ,
     'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'
];
let num = 0;
function next() {
    let slider = document.getElementById('slider');
    num++;
    if(num >= images.length) {
        num = 0;
    }
    slider.src = images[num];
}
function prev() {
    let slider = document.getElementById('slider');
    num--;
    if(num < 0) {
        num = images.length-1;
    }
    slider.src = images[num];
}
                </script>
    </body>
</html>

14. CSS 3d Slider

Made by CalviΥ². Simple 3D CSS Slider. Source

<!DOCTYPE html>
<html>
<head>
    <title>image slider</title>
</head>

<h3>Nature</h3>
<p>In nature, nothing is perfect and everything is perfect. Trees can be contorted, bent in weird ways, and they're still beautiful.  If you truly love nature, you will find beauty everywhere.</p>
<head>
</head>
<body>
    <style>
        body {
    margin: 2%;
    width: 96%;
}
#slider {
    display: flex;
    perspective: 500px;
}

img {
    width: 0%;
    box-shadow: 0px 10px 30px #333;   
}

.caption {
    text-align: center;
    margin-top: 10px;
    color: #333;
    font-size: 1em;
}

.order1 {
    flex: 1;
    order: 1;
}

.order1,
.left {
    transform-style: preserve-3d;
    transform: rotateY(-15deg);
    transform-origin: 100% 50%;
}

.order2 {
    flex: 2;
    order: 2;         
}

.order3 {
    flex: 1;
    order: 3;
}

.order3,
.right {
    transform-style: preserve-3d;
    transform: rotateY(15deg);
    transform-origin: 0% 50%;
}

.buttons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    perspective: 500px;
}

.left,
.right {
    color: grey;
    background-color: black;
}

.caption {
    margin-right: 20%;
    margin-left: 20%;
    min-width: 30%;
}

        </style>
    <div id="slider">
        <img class="slideimg order1" src="https://static.pexels.com/photos/34950/pexels-photo.jpg">
        <img class="slideimg order2" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg">
        <img class="slideimg order3" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg">
    </div>
    
    <div class="buttons">
        <button class="left" class="button black display-left" onclick="plusDivs(-1)">&#10094;</button>
        <p class="caption">Blue Rose Flower</p>
        <button class="right" class="button black display-right" onclick="plusDivs(1)">&#10095;</button>
    </div>

    <script>
    var slideIndex = 1;
    // showDivs(slideIndex);
    
    function plusDivs(n) {
      var i;
      var x = document.getElementsByClassName("slideimg");
      var y = document.getElementsByClassName("caption");
      var captions = ['Pexels Photo', 'Blue Rose Flower', 'Mist Bubble'];
      
      var pos = slideIndex + n;
      if (pos > x.length-1) {slideIndex = 0}    
      else if (pos < 0) {slideIndex = x.length-1}
      else slideIndex = pos;
      
      for (i = 0; i < x.length; i++) {
         x[i].classList.remove('order1', 'order2', 'order3');  
      }
      
      // prev
      if(slideIndex===0) {
          x[x.length-1].classList.add('order1');
      } else  x[slideIndex-1].classList.add('order1');
      
      // current
      x[slideIndex].classList.add('order2');
      
      // next
      if(slideIndex===x.length-1) {
          x[0].classList.add('order3');
      } else  x[slideIndex+1].classList.add('order3');  
      
      y[0].innerText = captions[slideIndex];
      
    }
    
    setInterval(plusDivs.bind(this,1),3000);
    </script>

</body>
</html>

15. Velo Slider with Borders

Made by Stephen Scaff. Velo Slider – with Borders. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:400,700'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:300,400,600'>
  
<style>
@charset "UTF-8";
.velo-slider__hint > span, .btn-draw {
  font-family: "Montserrat", Helvetica, sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

body {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-style: normal;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/** 
 * Default to Border Box
 */
*, *:before, *:after {
  box-sizing: border-box;
}

/**
 * Links
 */
a {
  text-decoration: none;
  background-color: transparent;
  outline: 0;
}

.btn-draw {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.4s ease-in-out;
}

.btn-draw {
  color: #00ffc8;
  margin-left: 2.3em;
}
.btn-draw:after {
  content: "";
  top: 0;
  right: 0;
  height: 1px;
  width: 100%;
  background-color: #00ffc8;
}
.btn-draw:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -2.4em;
  height: 1px;
  width: 3em;
  background-color: #00ffc8;
  transition: all 0.25s ease;
}
.btn-draw .btn-draw__text {
  position: relative;
  display: block;
  padding: 0.7555em 2.29em;
  line-height: 1.5;
  transition: transform 0.5s ease;
}
.btn-draw .btn-draw__text:before, .btn-draw .btn-draw__text:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 0;
  background-color: #00ffc8;
}
.btn-draw .btn-draw__text:before {
  top: 0;
  left: 0;
  transition: width 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-draw .btn-draw__text:after {
  bottom: 0;
  right: 0;
  transition: width 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-draw .btn-draw__text > span:before, .btn-draw .btn-draw__text > span:after {
  content: "";
  position: absolute;
  height: 0;
  width: 1px;
  background-color: #00ffc8;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
}
.btn-draw .btn-draw__text > span:before {
  left: 0;
  bottom: 0;
  transition: height 0.15s 0 cubic-bezier(0.77, 0, 0.175, 1);
}
.btn-draw .btn-draw__text > span:after {
  right: 0;
  top: 0;
  transition: height 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
@media (hover) {
  .btn-draw:hover, a:hover .btn-draw {
    cursor: pointer;
    color: #00ffc8;
  }
  .btn-draw:hover:before, a:hover .btn-draw:before {
    width: 0;
    transition: all 0.4s ease;
  }
  .btn-draw:hover .btn-draw__text, a:hover .btn-draw .btn-draw__text {
    transform: translateX(-2.2em);
    transition: transform 0.5s ease, width 1s ease;
  }
  .btn-draw:hover .btn-draw__text:before, a:hover .btn-draw .btn-draw__text:before {
    width: 100%;
    max-width: 100%;
    transition: width 0.15s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .btn-draw:hover .btn-draw__text:after, a:hover .btn-draw .btn-draw__text:after {
    width: 100%;
    transition: width 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .btn-draw:hover .btn-draw__text > span:before, a:hover .btn-draw .btn-draw__text > span:before {
    left: 0;
    height: 100%;
    transition: height 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .btn-draw:hover .btn-draw__text > span:after, a:hover .btn-draw .btn-draw__text > span:after {
    right: 0;
    height: 100%;
    transition: height 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
  }
}

.btn-draw.btn--white {
  color: #fff;
}
.btn-draw.btn--white:before, .btn-draw.btn--white:after,
.btn-draw.btn--white .btn-draw__text:before,
.btn-draw.btn--white .btn-draw__text:after,
.btn-draw.btn--white .btn-draw__text > span:before,
.btn-draw.btn--white .btn-draw__text > span:after {
  background-color: #fff;
}
.btn-draw.btn--white:hover, a:hover .btn-draw.btn--white {
  color: #fff;
}

body {
  font-family: "Montserrat", Georgia, serif;
  line-height: 1.6;
}

body {
  font-size: 100%;
}
@media (min-width: 32em) {
  body {
    font-size: 102%;
  }
}
@media (min-width: 54em) {
  body {
    font-size: 103%;
  }
}
@media (min-width: 65em) {
  body {
    font-size: 107%;
  }
}
@media (min-width: 75em) {
  body {
    font-size: 110%;
  }
}
@media (min-width: 91em) {
  body {
    font-size: 120%;
  }
}
@media (min-width: 115em) {
  body {
    font-size: 130%;
  }
}
@media (min-width: 130em) {
  body {
    font-size: 140%;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", Helvetica, sans-serif;
  font-weight: 700;
}

.velo-slides {
  z-index: 8;
  position: relative;
  height: 100vh;
  background-color: #111;
}
.velo-slides[data-velo-slider=on] {
  overflow: hidden;
}

.velo-slide {
  height: 100vh;
  z-index: 4;
}
@media (min-width: 54em) and (max-width: 65em) {
  .velo-slide {
    font-size: 80%;
  }
}
@media (min-width: 54em) and (min-height: 0) and (max-height: 45em) {
  .velo-slide {
    font-size: 70%;
  }
}
[data-velo-slider=on] .velo-slide {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.velo-slide.is-active {
  z-index: 8;
}
.velo-slide__bg {
  z-index: 7;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  color: #111;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-color: #111;
  overflow: hidden;
}
.velo-slide__bg:after {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.4;
  background: #111;
}
.velo-slide__figure {
  z-index: 0;
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1);
  transition: transform 0.5s ease;
}
.is-hovering .velo-slide__figure {
  transform: scale(1.1);
  transition: transform 0.5s ease;
}
.velo-slide__vid-wrap {
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.5s ease;
}
.velo-slide__vid-wrap:after {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.4;
  background: #111;
}
.is-hovering .velo-slide__vid-wrap {
  transform: scale(1.1);
  transition: transform 0.5s ease;
}
.velo-slide__vid {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: 100%;
  max-width: none;
  height: auto;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.velo-slide__header {
  z-index: 9;
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  overflow-y: hidden;
  padding: 6%;
}
.velo-slide__pretitle {
  color: #fff;
  max-width: 22em;
}
@media (min-width: 54em) {
  .velo-slide__pretitle {
    margin-left: 7%;
  }
}
.velo-slide__title {
  margin-bottom: 0.1em;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.025em;
  font-weight: 700;
  font-size: 2.25em;
}
@media (min-width: 54em) {
  .velo-slide__title {
    font-size: 5em;
  }
}
@media (min-width: 65em) {
  .velo-slide__title {
    font-size: 5em;
  }
}
@media (min-width: 91em) {
  .velo-slide__title {
    font-size: 5em;
  }
}
.velo-slide__text {
  color: #fff;
  max-width: 30em;
  display: block;
  margin: 1em 0 1.5em 1%;
  font-size: 1.1em;
  line-height: 1.8;
  font-weight: 300;
}
.velo-slide__btn {
  opacity: 0;
}
@media (min-width: 54em) {
  .velo-slide__btn {
    margin-left: 1vw;
  }
}
.is-active .velo-slide__btn {
  opacity: 1;
}
.velo-slide__btn > a > span {
  opacity: 0;
  overflow-y: hidden;
  transform: translate3d(0, 100%, 0);
}
.is-active .velo-slide__btn > a > span {
  opacity: 1;
  z-index: 9999;
  transform: translate3d(0, 0, 0);
  transition: transform 0.4s ease, opacity 0.8s ease;
}

.velo-slides[data-velo-theme=light] {
  background: #212121;
  border: 1em solid #c5cac5;
}
.velo-slides[data-velo-theme=light] .velo-slide {
  margin-top: -1em;
}
.velo-slides[data-velo-theme=light] .velo-slide__bg {
  color: #c5cac5;
}

[data-velo-theme=dark] {
  background: #111;
}
[data-velo-theme=dark] .velo-slides__bg {
  background-color: #111;
  filter: grayscale(100%);
}

.oh {
  display: block;
  overflow-y: hidden;
  padding: 0.02em 0;
}

.oh span {
  display: inline-block;
  transform: translate3d(0, 140%, 0);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.8s ease;
}

.is-active .oh span {
  transform: translate3d(0, 0%, 0);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
}

.is-active .oh:nth-of-type(2n) span {
  transition-delay: 0.2s;
}

.border,
.border:before,
.border:after,
.border span {
  z-index: 91;
  position: fixed;
  background-color: currentColor;
  transition: 0.35s ease-in-out;
}
.is-hovering .border,
.is-hovering .border:before,
.is-hovering .border:after,
.is-hovering .border span {
  transition: 0.5s ease-in-out;
}
.velocity-animating .border,
.velocity-animating .border:before,
.velocity-animating .border:after,
.velocity-animating .border span {
  transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.border {
  top: 0;
  left: 0;
  width: 100%;
  height: 0vw;
}
@media (min-width: 54em) {
  .border {
    height: 10vw;
  }
}
@media (min-width: 91em) {
  .border {
    height: 7vw;
  }
}
@media (min-width: 115em) {
  .border {
    height: 7vw;
  }
}
.is-hovering .border {
  height: 0vw;
}
.velocity-animating .border {
  height: 8vw;
}
@media (min-width: 54em) {
  .velocity-animating .border {
    height: 12vw;
  }
}

.border:before {
  content: "";
  bottom: 0;
  left: 0;
  width: 0vw;
  height: 100%;
  width: 0vw;
}
@media (min-width: 54em) {
  .border:before {
    width: 10vw;
  }
}
@media (min-width: 91em) {
  .border:before {
    width: 7vw;
  }
}
@media (min-width: 115em) {
  .border:before {
    width: 7vw;
  }
}
.is-hovering .border:before {
  width: 0vw;
}
.velocity-animating .border:before {
  width: 8vw;
}
@media (min-width: 54em) {
  .velocity-animating .border:before {
    width: 12vw;
  }
}

.border:after {
  content: "";
  bottom: 0;
  right: 0;
  height: 100%;
  width: 0vw;
  width: 0vw;
}
@media (min-width: 54em) {
  .border:after {
    width: 10vw;
  }
}
@media (min-width: 91em) {
  .border:after {
    width: 7vw;
  }
}
@media (min-width: 115em) {
  .border:after {
    width: 7vw;
  }
}
.is-hovering .border:after {
  width: 0vw;
}
.velocity-animating .border:after {
  width: 8vw;
}
@media (min-width: 54em) {
  .velocity-animating .border:after {
    width: 12vw;
  }
}

.border span {
  bottom: 0;
  left: 0;
  height: 0vw;
  width: 100%;
  height: 0vw;
}
@media (min-width: 54em) {
  .border span {
    height: 10vw;
  }
}
@media (min-width: 91em) {
  .border span {
    height: 7vw;
  }
}
@media (min-width: 115em) {
  .border span {
    height: 7vw;
  }
}
.is-hovering .border span {
  height: 0vw;
}
.velocity-animating .border span {
  height: 8vw;
}
@media (min-width: 54em) {
  .velocity-animating .border span {
    height: 12vw;
  }
}

.velo-slider__hint {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  height: 100vh;
  width: 4em;
  font-size: 0.9em;
  color: #fff;
}
@media (min-width: 54em) {
  .velo-slider__hint {
    display: block;
  }
}
.velo-slider__hint > span {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
  overflow: hidden;
}
.velo-slider__hint > span > span {
  display: inline-block;
  transform: translateY(-110%);
}
.is-active .velo-slider__hint > span > span {
  opacity: 1;
  top: 50%;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateY(0%);
  transition: 0.4 ease;
}

.velo-slides-nav {
  /* lateral navigation */
  position: fixed;
  z-index: 91;
  right: 3%;
  bottom: 1em;
}
@media (min-width: 54em) {
  .velo-slides-nav {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}
.velo-slides-nav__list {
  list-style: none;
}
.velo-slides-nav li:first-child {
  margin-bottom: 0.25em;
}
.velo-slides-nav a {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.velo-slides-nav a:hover {
  color: white;
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.6);
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.velo-slides-nav a.inactive {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.velo-slides-nav i {
  font-size: 2.2em;
}
@media (min-width: 54em) {
  .velo-slides-nav i {
    font-size: 1.5em;
  }
}

@font-face {
  font-family: "ssicons";
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfgAAAC8AAAAYGNtYXAXVtKOAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZiOKaFQAAAF4AAADTGhlYWQNcwRaAAAExAAAADZoaGVhB6EDzQAABPwAAAAkaG10eCYAA2sAAAUgAAAAMGxvY2EETAN0AAAFUAAAABptYXhwAA4AIQAABWwAAAAgbmFtZbVmJhcAAAWMAAABhnBvc3QAAwAAAAAHFAAAACAAAwPHAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qf//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAArgPFAp8AFgAAEzQ2NzYyFwkBNjIXFhQHAQYiJwEuATUABAMIFQgBugG7CBUHCAj+MwcVCP4zAwQCjQUJBAcH/kUBuwcHCBUH/jMICAHNAwoFAAAAAQDu/8AC3wOFABYAAAUiJicmNDcJASY0NzYyFwEWFAcBDgEjAQAFCQQICAG7/kUICAcWBwHNBwf+MwQJBUAEAwgVCAG6AbsIFQcICP4zBxUI/jMDBAAAAAEAAACuA8UCnwAWAAA3FBYXFjI3CQEWMjc2NCcBJiIHAQ4BFQAEAwgVCAG6AbsIFQcICP4zBxUI/jMDBMAFCQQICAG7/kUICAcWBwHNBwf+MwQJBQAAAAABAO7/wALfA4UAFgAABTI2NzY0JwkBNjQnJiIHAQYUFwEeATMCzQUJBAcH/kUBuwcHCBUH/jMICAHNAwoFQAQDCBUIAboBuwgVBwgI/jMHFQj+MwMEAAAAAQCh//MDMwOfAB4AAAkBBhQXFjI3AREUFjMyNjURARYyNz4BNTQmJwEmIgcB1P7NBwcIFQcBCA8KCw8BBwgVCAMEBAP+zAcVCAOf/s0IFQcICAEH/L4LDw8LA0L++QgIAwoFBQkEATMHBwAAAQCa/+EDLAONAB4AAAUBNjQnJiIHARE0JiMiBhURASYiBw4BFRQWFwEWMjcB+QEzBwcIFQf++A8LCg/++AcVCAQDAwQBMwgVCB8BMwgVBwgI/vkDQgsPDwv8vgEHCAgDCgUFCQT+zQcHAAAAAQAhAFoDzQLsAB4AABMBNjIXFhQHASEyFhUUBiMhARYUBw4BIyImJwEmNDchATMIFQcICP75A0ILDw8L/L4BBwgIAwoFBQkE/s0HBwG5ATMHBwgVB/74DwsKD/74BxUIBAMDBAEzCBUIAAAAAQAzAFoD3wLsAB4AAAkBJiIHBhQXASEiBhUUFjMhAQYUFx4BMzI2NwE2NCcD3/7NCBUHCAgBB/y+Cw8PCwNC/vkICAMKBQUJBAEzBwcBuQEzBwcIFQf++A8LCg/++AcVCAQDAwQBMwgVCAAAAQAAAAEAAMChG+1fDzz1AAsEAAAAAADVOl//AAAAANU6X/8AAP/AA98DnwAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAD3wABAAAAAAAAAAAAAAAAAAAADAQAAAAAAAAAAAAAAAIAAAAEAAAABAAA7gQAAAAEAADuBAAAoQQAAJoEAAAhBAAAMwAAAAAACgAUAB4ASgB2AKIAzgEEAToBcAGmAAAAAQAAAAwAHwABAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApHNzaWNvbnMAcwBzAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMHNzaWNvbnMAcwBzAGkAYwBvAG4Ac3NzaWNvbnMAcwBzAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcnNzaWNvbnMAcwBzAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format("truetype");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "ssicons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-down-chev:before {
  content: "ξ€€";
}

.icon-right-chev:before {
  content: "";
}

.icon-up-chev:before {
  content: "";
}

.icon-left-chev:before {
  content: "";
}

.icon-up-arrow:before {
  content: "";
}

.icon-down-arrow:before {
  content: "ξ€…";
}

.icon-left-arrow:before {
  content: "";
}

.icon-right-arrow:before {
  content: "";
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body>
  <main role="main">

  <!-- Slider -->
  <section class="velo-slides" data-velo-slider="on" data-velo-theme="light">
  

    <!-- Slide -->
    <section class="velo-slide">
      <!-- Pretitle Hint -->
      <span class="velo-slider__hint"><span><span>Check Them Bldgs</span></span></span> <!-- Slide BG -->
      <div class="velo-slide__bg">
        <!-- Borders -->
        <span class="border"><span></span></span> <!-- Img -->
        <figure class="velo-slide__figure" style="background-image: url(https://source.unsplash.com/VsBl5PwVZpY/2000x1200)"></figure>
      </div>
    
      <!-- Header -->
      <header class="velo-slide__header">
        <h3 class="velo-slide__title"><span class="oh"><span>The Name Is</span></span><span class="oh"><span>Stephen Scaff</span></span></h3>
        <p class="velo-slide__text"><span class="oh"><span>I'm a Creative Developer currently building web things at the Seattle Branding + Interactive firm, Urban Influence.</span></span></p>
        <span class="velo-slide__btn"><a class="btn-draw btn--white" href="#"><span class="btn-draw__text"><span>View Work</span></span></a></span>
      </header>
    </section>

    <!-- Slide -->
    <section class="velo-slide">
      <!-- Pretitle Hint -->
      <span class="velo-slider__hint"><span><span>What's up Playas</span></span></span> 
      <!-- Slide BG -->
      <div class="velo-slide__bg">
        <!-- Borders -->
        <span class="border"><span></span></span> <!-- Img -->
        <figure class="velo-slide__figure" style="background-image: url(https://source.unsplash.com/D8GFCYxyJj8/2000x1200)"></figure>
      </div>
    
      <!-- Header -->
      <header class="velo-slide__header">
        <h3 class="velo-slide__title"><span class="oh"><span>Another Day</span></span><span class="oh"><span>Another Slide</span></span></h3>
        <p class="velo-slide__text"><span class="oh"><span>The here slider interaction thing is using Velocity for ehanced animation performance.</span></span></p>
      </header>
    </section>
    
    <!-- Slide - with Video -->
    <section class="velo-slide">
      <!-- Pretitle Hint -->
      <span class="velo-slider__hint"><span><span>Urban Influence</span></span></span> 
      <!-- Slide BG -->
      <div class="velo-slide__bg">
        <!-- Borders -->
        <span class="border"><span></span></span> <!-- Img -->
        <figure class="velo-slide__figure" style="background-image: url()"></figure>
        <div class="velo-slide__vid-wrap">
          <video autoplay="" class="velo-slide__vid" loop="" poster="">
            <source src="http://uiclients.com/assets/videos/ui-chaun.mp4" type="video/mp4"> Wait, are you still using IE? Bruv. Go get Chrome, or kick rocks.</video>
        </div>
      </div><!-- Header -->
      <header class="velo-slide__header">
        <h3 class="velo-slide__title"><span class="oh"><span>Pigeon Wisdom</span></span><span class="oh"><span>Agency Site</span></span></h3>
        <p class="velo-slide__text"><span class="oh"><span>Live from the Coop, SOTD rocking, folio and storytelling joint for the Pigeon Wizzy squad. Coo Coo Mfers.</span></span></p>
        <span class="velo-slide__btn"><a class="btn-draw btn--white" href="#"><span class="btn-draw__text"><span>View Project</span></span></a></span>
      </header>
    </section>
    
   
    <!-- Slides Nav -->
    <nav class="velo-slides-nav">
      <ul class="velo-slides-nav__list">
        <li>
          <a class="js-velo-slides-prev velo-slides-nav__prev inactive" href="#0"><i class="icon-up-arrow"></i></a>
        </li>
        <li>
          <a class="js-velo-slides-next velo-slides-nav__next" href="#0"><i class="icon-down-arrow"></i></a>
        </li>
      </ul>
    </nav>
  </section>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.3.0/velocity.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.3.0/velocity.ui.js'></script>
      <script id="rendered-js" >
/**
 * Velocity Effects
 *
 * First, A few Registered effects for velocity's ui kit.
 * Actual slider stuff below
 */

var scaleDownAmnt = 0.7;
var boxShadowAmnt = '40px';

$.Velocity.RegisterEffect("translateUp", {
  defaultDuration: 1,
  calls: [
  [{
    translateY: '-100%' },
  1]] });


$.Velocity.RegisterEffect("translateDown", {
  defaultDuration: 1,
  calls: [
  [{
    translateY: '100%' },
  1]] });


$.Velocity.RegisterEffect("translateNone", {
  defaultDuration: 1,
  calls: [
  [{
    translateY: '0',
    opacity: '1',
    scale: '1' },

  1]] });


//scale down
$.Velocity.RegisterEffect("scaleDown", {
  defaultDuration: 1,
  calls: [
  [{
    opacity: '0',
    scale: '0.7' },

  1]] });



//gallery
$.Velocity.RegisterEffect("scaleDown.moveUp", {
  defaultDuration: 1,
  calls: [
  [{
    translateY: '0%',
    scale: scaleDownAmnt },

  0.20],
  [{
    translateY: '-100%' },
  0.60],
  [{
    translateY: '-100%',
    scale: '1'
    // boxShadowBlur: '0'
  }, 0.20]] });


$.Velocity.RegisterEffect("scaleDown.moveUp.scroll", {
  defaultDuration: 1,
  calls: [
  [{
    translateY: '-100%',
    scale: scaleDownAmnt },

  0.60],
  [{
    translateY: '-100%',
    scale: '1'
    // boxShadowBlur: '0'
  }, 0.40]] });


$.Velocity.RegisterEffect("scaleUp.moveUp", {
  defaultDuration: 1,
  calls: [
  [{
    translateY: '90%',
    scale: scaleDownAmnt
    // boxShadowBlur: boxShadowAmnt     
  }, 0.20],
  [{
    translateY: '0%' },
  0.60],
  [{
    translateY: '0%',
    scale: '1'
    // boxShadowBlur: '0'
  }, 0.20]] });


$.Velocity.RegisterEffect("scaleUp.moveUp.scroll", {
  defaultDuration: 1,
  calls: [
  [{
    translateY: '0%',
    scale: scaleDownAmnt
    // boxShadowBlur: boxShadowAmnt
  }, 0.60],
  [{
    translateY: '0%',
    scale: '1'
    // boxShadowBlur: '0'
  }, 0.40]] });


$.Velocity.RegisterEffect("scaleDown.moveDown", {
  defaultDuration: 1,
  calls: [
  [{
    translateY: '0%',
    scale: scaleDownAmnt
    // boxShadowBlur: boxShadowAmnt
  }, 0.20],
  [{
    translateY: '100%' },
  0.60],
  [{
    translateY: '100%',
    scale: '1'
    // boxShadowBlur: '0'
  }, 0.20]] });


$.Velocity.RegisterEffect("scaleDown.moveDown.scroll", {
  defaultDuration: 1,
  calls: [
  [{},

  0.60],
  [{
    translateY: '100%',
    scale: '1'
    // boxShadowBlur: '0'
  }, 0.40]] });


$.Velocity.RegisterEffect("scaleUp.moveDown", {
  defaultDuration: 1,
  calls: [
  [{
    translateY: '-90%',
    scale: scaleDownAmnt
    // boxShadowBlur: boxShadowAmnt
  }, 0.20],
  [{
    translateY: '0%' },
  0.60],
  [{
    translateY: '0%',
    scale: '1'
    // boxShadowBlur: '0'
  }, 0.20]] });





/**
 * Velo Slider
 * A Custom Slider using Velocity and Velocity UI effects
 */

var VeloSlider = function () {

  /**
   * Global Settings 
   */
  var settings = {
    veloInit: $('.velo-slides').data('velo-slider'),
    $veloSlide: $('.velo-slide'),
    veloSlideBg: '.velo-slide__bg',
    navPrev: $('.velo-slides-nav').find('a.js-velo-slides-prev'),
    navNext: $('.velo-slides-nav').find('a.js-velo-slides-next'),
    veloBtn: $('.velo-slide__btn'),
    delta: 0,
    scrollThreshold: 7,
    currentSlide: 1,
    animating: false,
    animationDuration: 2000 };



  // Flags
  var delta = 0,
  animating = false;

  return {

    /**
     * Init 
     */
    init: function () {
      this.bind();
    },

    /**
     * Bind our click, scroll, key events
     */
    bind: function () {

      //  Add active to first slide to set it off
      settings.$veloSlide.first().addClass('is-active');

      //  Init with a data attribute, 
      //  Binding the animation to scroll, arrows, keys
      if (settings.veloInit == 'on') {
        VeloSlider.initScrollJack();
        $(window).on('DOMMouseScroll mousewheel', VeloSlider.scrollJacking);
      }

      // Arrow / Click Nav
      settings.navPrev.on('click', VeloSlider.prevSlide);
      settings.navNext.on('click', VeloSlider.nextSlide);

      // Key Nav
      $(document).on('keydown', function (e) {
        var keyNext = e.which == 39 || e.which == 40,
        keyPrev = e.which == 37 || e.which == 38;

        if (keyNext && !settings.navNext.hasClass('inactive')) {
          e.preventDefault();
          VeloSlider.nextSlide();

        } else if (keyPrev && !settings.navPrev.hasClass('inactive')) {
          e.preventDefault();
          VeloSlider.prevSlide();
        }
      });

      // // Swipes
      // $(window).swipe(function( direction, offset ) {
      //   //if (offset < 100) { return; }
      //   if (direction == "up") { 
      //     VeloSlider.prevSlide(); 
      //     console.log('swipe up');

      //   }
      //   if (direction == "down") { VeloSlider.nextSlide(); } 
      // });

      //set navigation arrows visibility
      VeloSlider.checkNavigation();

      // Call Button Hover animation
      VeloSlider.hoverAnimation();

    },

    /**
     * Hover Animation
     * Adds 'is-hovering' class to the current slide
     * when hovering over the button.
     */
    hoverAnimation: function () {
      settings.veloBtn.hover(function () {
        $(this).closest(settings.$veloSlide).toggleClass('is-hovering');
      });
    },

    /** 
     * Set Animation
     * Defines the animation sequence, calling our registered velocity effects
     * @see js/components/_velocity-effects.js
     */
    setAnimation: function (midStep, direction) {

      // Vars for our velocity effects
      var animationVisible = 'translateNone',
      animationTop = 'translateUp',
      animationBottom = 'translateDown',
      easing = 'ease',
      animDuration = settings.animationDuration;

      // Middle Step
      if (midStep) {
        animationVisible = 'scaleUp.moveUp.scroll';
        animationTop = 'scaleDown.moveUp.scroll';
        animationBottom = 'scaleDown.moveDown.scroll';

      } else {
        animationVisible = direction == 'next' ? 'scaleUp.moveUp' : 'scaleUp.moveDown';
        animationTop = 'scaleDown.moveUp';
        animationBottom = 'scaleDown.moveDown';
      }

      return [animationVisible, animationTop, animationBottom, animDuration, easing];
    },

    /** 
     * Init Scroll Jaclk
     */
    initScrollJack: function () {

      var visibleSlide = settings.$veloSlide.filter('.is-active'),
      topSection = visibleSlide.prevAll(settings.$veloSlide),
      bottomSection = visibleSlide.nextAll(settings.$veloSlide),
      animationParams = VeloSlider.setAnimation(false),
      animationVisible = animationParams[0],
      animationTop = animationParams[1],
      animationBottom = animationParams[2];
      console.log(animationParams);
      console.log(animationParams[4]);

      visibleSlide.children('div').velocity(animationVisible, 1, function () {
        visibleSlide.css('opacity', 1);
        topSection.css('opacity', 1);
        bottomSection.css('opacity', 1);
      });

      topSection.children('div').velocity(animationTop, 0);
      bottomSection.children('div').velocity(animationBottom, 0);
    },

    /**
     * Scroll Jack
     * On Mouse Scroll
     */
    scrollJacking: function (e) {
      if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {
        delta--;
        Math.abs(delta) >= settings.scrollThreshold && VeloSlider.prevSlide();
      } else {
        delta++;
        delta >= settings.scrollThreshold && VeloSlider.nextSlide();
      }
      return false;
    },

    /**
     * Previous Slide
     */
    prevSlide: function (e) {
      //go to previous section
      typeof e !== 'undefined' && e.preventDefault();

      var visibleSlide = settings.$veloSlide.filter('.is-active'),
      animationParams = VeloSlider.setAnimation(midStep, 'prev'),
      midStep = false;

      visibleSlide = midStep ? visibleSlide.next(settings.$veloSlide) : visibleSlide;

      console.log(midStep);

      if (!animating && !visibleSlide.is(":first-child")) {
        animating = true;

        visibleSlide.
        removeClass('is-active').
        children(settings.veloSlideBg).
        velocity(animationParams[2], animationParams[3], animationParams[4]).
        end().
        prev(settings.$veloSlide).
        addClass('is-active').
        children(settings.veloSlideBg).
        velocity(animationParams[0], animationParams[3], animationParams[4], function () {
          animating = false;
        });
        currentSlide = settings.currentSlide - 1;
      }
      VeloSlider.resetScroll();
    },


    /** 
     * Next Slide
     */
    nextSlide: function (e) {

      //go to next section
      typeof e !== 'undefined' && e.preventDefault();

      var visibleSlide = settings.$veloSlide.filter('.is-active'),
      animationParams = VeloSlider.setAnimation(midStep, 'next'),
      midStep = false;

      if (!animating && !visibleSlide.is(":last-of-type")) {
        animating = true;

        visibleSlide.removeClass('is-active').
        children(settings.veloSlideBg).
        velocity(animationParams[1], animationParams[3]).
        end().
        next(settings.$veloSlide).
        addClass('is-active').
        children(settings.veloSlideBg).
        velocity(animationParams[0], animationParams[3], function () {
          animating = false;
        });
        currentSlide = settings.currentSlide + 1;
      }
      VeloSlider.resetScroll();
    },

    /**
     * Reset SCroll
     */
    resetScroll: function () {
      delta = 0;
      VeloSlider.checkNavigation();
    },

    /**
     * Check Nav
     * Adds / hides nav based on first/last slide
     * @todo - loop slides, without cloning if possible
     */
    checkNavigation: function () {
      //update navigation arrows visibility
      settings.$veloSlide.filter('.is-active').is(':first-of-type') ? settings.navPrev.addClass('inactive') : settings.navPrev.removeClass('inactive');
      settings.$veloSlide.filter('.is-active').is(':last-of-type') ? settings.navNext.addClass('inactive') : settings.navNext.removeClass('inactive');

    } };

}();

// INIT
VeloSlider.init();
    </script>

</body>
</html>

16. CSS Slider pure css

Made by Ivan Grozdic. CSS Slider with floating effects, works very smooth. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
  
<style>
/* Please ❀ this if you like it! */


/* ========================================= * 
		        BEST VIEWED FULLSCREEN
   https://codepen.io/ig_design/full/NWxwBvw
 * ========================================= */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

body{
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: #343434;
	background-color: #f1f2f6;
	overflow-x: hidden;
}
a {
	cursor: pointer;
}
a:hover {
	text-decoration: none;
}

.section{
  position: relative;
  width: 100%;
  display: block;
}
.full-height{
  min-height: 100vh;
}
.over-hide{
  overflow: hidden;
}
.padding-tb{
  padding: 100px 0;
}
[type="radio"]:checked,
[type="radio"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
  position: relative;
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  margin-right: 6px;
  margin-left: 6px;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid #bdc3c7;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-image: url('https://assets.codepen.io/1462889/sl1.jpg');
  animation: border-transform 6s linear infinite alternate forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
.checkbox.scnd + label{
  background-image: url('https://assets.codepen.io/1462889/sl2.jpg');
}
.checkbox.thrd + label{
  background-image: url('https://assets.codepen.io/1462889/sl3.jpg');
}
.checkbox.foth + label{
  background-image: url('https://assets.codepen.io/1462889/sl4.jpg');
}

.checkbox:checked + label{
  box-shadow: 0 8px 25px 0 rgba(16,39,112,.3);
  transform: scale(1.3);
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
@keyframes border-transform{
  0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

.slider-height-padding {
  padding-top: 440px;
}

ul {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  z-index: 100;
  padding: 0;
  margin: 0;
  list-style: none;
}
ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  z-index: 100;
  padding: 0;
  margin: 0;
  list-style: none;
  height: 400px;
  border: 5px solid #bdc3c7;
  background-size: cover;
  background-position: center;
  background-image: url('https://assets.codepen.io/1462889/sl1.jpg');
  border-radius: 50%;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 2.7;
  color: #343434;
  writing-mode: vertical-rl;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 25px 0 rgba(16,39,112,.1);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
ul li span {
  mix-blend-mode: difference;
}
ul li:nth-child(2) {
  background-image: url('https://assets.codepen.io/1462889/sl2.jpg');
}
ul li:nth-child(3) {
  background-image: url('https://assets.codepen.io/1462889/sl3.jpg');
}
ul li:nth-child(4) {
  background-image: url('https://assets.codepen.io/1462889/sl4.jpg');
}


.checkbox.frst:checked ~ ul li:nth-child(1) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
}
.checkbox.scnd:checked ~ ul li:nth-child(2) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
}
.checkbox.thrd:checked ~ ul li:nth-child(3) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
}
.checkbox.foth:checked ~ ul li:nth-child(4) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 16px;
}

.logo {
	position: absolute;
	top: 30px;
	right: 30px;
	display: block;
	z-index: 100;
	transition: all 250ms linear;
}
.logo img {
	height: 26px;
	width: auto;
	display: block;
}



@media (max-width: 767px) {
  .slider-height-padding {
    padding-top: 340px;
  }
  ul li {
    height: 300px;
    font-size: 13px;
    letter-spacing: 1px;
  }
}

@media (max-width: 575px) {
  .slider-height-padding {
    padding-top: 240px;
  }
  ul li {
    height: 200px;
  }
}
</style>
</head>
<body>
  <a href="https://front.codes/" class="logo hover-target" target="_blank">
		<img src="https://assets.codepen.io/1462889/fcb.png" alt="">
	</a>

	<div class="section full-height over-hide px-4 px-sm-0">
		<div class="container">
			<div class="row full-height justify-content-center">
				<div class="col-lg-10 col-xl-8 align-self-center padding-tb">
					<div class="section mx-auto text-center slider-height-padding">
			          	<input class="checkbox frst" type="radio" id="slide-1" name="slider" checked/>
			          	<label for="slide-1"></label>
			          	<input class="checkbox scnd" type="radio" name="slider" id="slider-2"/>
			          	<label for="slider-2"></label>
			          	<input class="checkbox thrd" type="radio" name="slider" id="slider-3"/>
			          	<label for="slider-3"></label>
			          	<input class="checkbox foth" type="radio" name="slider" id="slider-4"/>
			          	<label for="slider-4"></label>
						<ul>
							<li>
								<span>MALE GOOFY FACE</span>
						    </li>
							<li>
								<span>TOY PIG</span>
						    </li>
							<li>
								<span>SHY PORTRAIT</span>
						    </li>
							<li>
								<span>SKATEBOARD FACE</span>
						    </li>
					    </ul>
				    </div>
			    </div>
	      	</div>
	    </div>
	</div>
      <script id="rendered-js" >
/* Please ❀ this if you like it! */
    </script>
</body>
</html>

17. Responsive Parallax Drag-slider

Made by Ruslan Pivovarov. Responsive Parallax Drag-slider With Transparent Letters. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.cont {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slider {
  position: relative;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  cursor: all-scroll;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.slider.animation {
  transition: transform 750ms ease-in-out;
}
.slider.animation .slide__darkbg {
  transition: transform 750ms ease-in-out;
}
.slider.animation .slide__text {
  transition: transform 750ms ease-in-out;
}
.slider.animation .slide__letter {
  transition: transform 750ms ease-in-out;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slide--1 {
  left: 0%;
}
.slide--2 {
  left: 100%;
}
.slide--3 {
  left: 200%;
}
.slide--4 {
  left: 300%;
}
.slide--5 {
  left: 400%;
}
.slide__darkbg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  z-index: 10;
}
.slide__text-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 15;
}
.slide__letter {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  font-size: 50vw;
  font-weight: 800;
  color: #000;
  z-index: 2;
  will-change: transform;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.slide__text {
  font-size: 8vw;
  font-weight: 800;
  text-transform: uppercase;
  transform: translate3d(0, 0, 0);
  letter-spacing: 12px;
  color: #fff;
  will-change: transform;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.slide__text:nth-child(odd) {
  z-index: 2;
}
.slide__text:nth-child(even) {
  z-index: 1;
}
.slide--1__darkbg {
  left: 0%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg") center center no-repeat;
  background-size: cover;
  background-position: 0px center, 0px center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slide--1__darkbg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 39, 0.83);
}
.slide--1__letter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg") center center no-repeat;
  background-position: 0px center, 0px center;
  background-size: cover;
}
.slide--2__darkbg {
  left: -50%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg") center center no-repeat;
  background-size: cover;
  background-position: 0px center, 0px center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slide--2__darkbg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 39, 0.83);
}
.slide--2__letter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg") center center no-repeat;
  background-position: 0px center, 0px center;
  background-size: cover;
}
.slide--3__darkbg {
  left: -100%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg") center center no-repeat;
  background-size: cover;
  background-position: 0px center, 0px center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slide--3__darkbg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 39, 0.83);
}
.slide--3__letter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg") center center no-repeat;
  background-position: 0px center, 0px center;
  background-size: cover;
}
.slide--4__darkbg {
  left: -150%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
  background-size: cover;
  background-position: 0px center, 0px center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slide--4__darkbg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 39, 0.83);
}
.slide--4__letter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
  background-position: 0px center, 0px center;
  background-size: cover;
}
.slide--5__darkbg {
  left: -200%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
  background-size: cover;
  background-position: 0px center, 0px center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.slide--5__darkbg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 39, 0.83);
}
.slide--5__letter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
  background-position: 0px center, 0px center;
  background-size: cover;
}

.nav {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  list-style-type: none;
  z-index: 10;
}
.nav__slide {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: 10px;
  cursor: pointer;
}
@media screen and (max-width: 400px) {
  .nav__slide {
    width: 22px;
    height: 22px;
  }
}
.nav__slide:hover:after {
  transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}
.nav__slide:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0, 0);
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0;
  transition: 300ms;
}
.nav__slide--1 {
  margin-left: 0;
}

.nav-active:after {
  transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}

.side-nav {
  position: absolute;
  width: 10%;
  height: 100%;
  top: 0;
  z-index: 20;
  cursor: pointer;
  opacity: 0;
  transition: 300ms;
}
.side-nav:hover {
  opacity: 0.1;
}
.side-nav--right {
  right: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
}
.side-nav--left {
  left: 0;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
}

html {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  background-color: #000;
  overflow: hidden;
}
</style>
</head>
<body>
  <div class="cont">
	<div class="slider"></div>
	<ul class="nav"></div>
	<div data-target='right' class="side-nav side-nav--right"></div>
	<div data-target='left' class="side-nav side-nav--left"></div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script id="rendered-js" >
$(document).ready(function () {
  const $cont = $('.cont');
  const $slider = $('.slider');
  const $nav = $('.nav');
  const winW = $(window).width();
  const animSpd = 750; // Change also in CSS
  const distOfLetGo = winW * 0.2;
  let curSlide = 1;
  let animation = false;
  let autoScrollVar = true;
  let diff = 0;

  // Generating slides
  let arrCities = ['Amsterdam', 'Rome', 'Newβ€”York', 'Singapore', 'Prague']; // Change number of slides in CSS also
  let numOfCities = arrCities.length;
  let arrCitiesDivided = [];

  arrCities.map(city => {
    let length = city.length;
    let letters = Math.floor(length / 4);
    let exp = new RegExp(".{1," + letters + "}", "g");

    arrCitiesDivided.push(city.match(exp));
  });

  let generateSlide = function (city) {
    let frag1 = $(document.createDocumentFragment());
    let frag2 = $(document.createDocumentFragment());
    const numSlide = arrCities.indexOf(arrCities[city]) + 1;
    const firstLetter = arrCitiesDivided[city][0].charAt(0);

    const $slide =
    $(`<div data-target="${numSlide}" class="slide slide--${numSlide}">
							<div class="slide__darkbg slide--${numSlide}__darkbg"></div>
							<div class="slide__text-wrapper slide--${numSlide}__text-wrapper"></div>
						</div>`);

    const letter =
    $(`<div class="slide__letter slide--${numSlide}__letter">
							${firstLetter}
						</div>`);

    for (let i = 0, length = arrCitiesDivided[city].length; i < length; i++) {if (window.CP.shouldStopExecution(0)) break;
      const text =
      $(`<div class="slide__text slide__text--${i + 1}">
								${arrCitiesDivided[city][i]}
							</div>`);
      frag1.append(text);
    }window.CP.exitedLoop(0);

    const navSlide = $(`<li data-target="${numSlide}" class="nav__slide nav__slide--${numSlide}"></li>`);
    frag2.append(navSlide);
    $nav.append(frag2);

    $slide.find(`.slide--${numSlide}__text-wrapper`).append(letter).append(frag1);
    $slider.append($slide);

    if (arrCities[city].length <= 4) {
      $('.slide--' + numSlide).find('.slide__text').css("font-size", "12vw");
    }
  };

  for (let i = 0, length = numOfCities; i < length; i++) {if (window.CP.shouldStopExecution(1)) break;
    generateSlide(i);
  }window.CP.exitedLoop(1);

  $('.nav__slide--1').addClass('nav-active');

  // Navigation
  function bullets(dir) {
    $('.nav__slide--' + curSlide).removeClass('nav-active');
    $('.nav__slide--' + dir).addClass('nav-active');
  }

  function timeout() {
    animation = false;
  }

  function pagination(direction) {
    animation = true;
    diff = 0;
    $slider.addClass('animation');
    $slider.css({
      'transform': 'translate3d(-' + (curSlide - direction) * 100 + '%, 0, 0)' });


    $slider.find('.slide__darkbg').css({
      'transform': 'translate3d(' + (curSlide - direction) * 50 + '%, 0, 0)' });


    $slider.find('.slide__letter').css({
      'transform': 'translate3d(0, 0, 0)' });


    $slider.find('.slide__text').css({
      'transform': 'translate3d(0, 0, 0)' });

  }

  function navigateRight() {
    if (!autoScrollVar) return;
    if (curSlide >= numOfCities) return;
    pagination(0);
    setTimeout(timeout, animSpd);
    bullets(curSlide + 1);
    curSlide++;
  }

  function navigateLeft() {
    if (curSlide <= 1) return;
    pagination(2);
    setTimeout(timeout, animSpd);
    bullets(curSlide - 1);
    curSlide--;
  }

  function toDefault() {
    pagination(1);
    setTimeout(timeout, animSpd);
  }

  // Events
  $(document).on('mousedown touchstart', '.slide', function (e) {
    if (animation) return;
    let target = +$(this).attr('data-target');
    let startX = e.pageX || e.originalEvent.touches[0].pageX;
    $slider.removeClass('animation');

    $(document).on('mousemove touchmove', function (e) {
      let x = e.pageX || e.originalEvent.touches[0].pageX;
      diff = startX - x;
      if (target === 1 && diff < 0 || target === numOfCities && diff > 0) return;

      $slider.css({
        'transform': 'translate3d(-' + ((curSlide - 1) * 100 + diff / 30) + '%, 0, 0)' });


      $slider.find('.slide__darkbg').css({
        'transform': 'translate3d(' + ((curSlide - 1) * 50 + diff / 60) + '%, 0, 0)' });


      $slider.find('.slide__letter').css({
        'transform': 'translate3d(' + diff / 60 + 'vw, 0, 0)' });


      $slider.find('.slide__text').css({
        'transform': 'translate3d(' + diff / 15 + 'px, 0, 0)' });

    });
  });

  $(document).on('mouseup touchend', function (e) {
    $(document).off('mousemove touchmove');

    if (animation) return;

    if (diff >= distOfLetGo) {
      navigateRight();
    } else if (diff <= -distOfLetGo) {
      navigateLeft();
    } else {
      toDefault();
    }
  });

  $(document).on('click', '.nav__slide:not(.nav-active)', function () {
    let target = +$(this).attr('data-target');
    bullets(target);
    curSlide = target;
    pagination(1);
  });

  $(document).on('click', '.side-nav', function () {
    let target = $(this).attr('data-target');

    if (target === 'right') navigateRight();
    if (target === 'left') navigateLeft();
  });

  $(document).on('keydown', function (e) {
    if (e.which === 39) navigateRight();
    if (e.which === 37) navigateLeft();
  });

  $(document).on('mousewheel DOMMouseScroll', function (e) {
    if (animation) return;
    let delta = e.originalEvent.wheelDelta;

    if (delta > 0 || e.originalEvent.detail < 0) navigateLeft();
    if (delta < 0 || e.originalEvent.detail > 0) navigateRight();
  });
});
    </script>
</body>
</html>

18. dot slider

Made by Derek Nguyen. A simple dot slider, clicking the dots changes the slide. Source

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  background-color: #ececec;
  transition: background-color 0.3s ease;
}
.emoji {
  position: absolute;
  margin-left: 20px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 250px;
  opacity: 0.2;
}
.container {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
ul {
  list-style-type: none;
}
ul .is_active {
  padding: 10px 15px;
  cursor: default;
}
ul .is_active:hover {
  opacity: 1;
}
ul li {
  color: #222;
  position: relative;
  display: inline-block;
  background-color: #fff;
  border-radius: 100px;
  vertical-align: middle;
  min-width: 12px;
  min-height: 12px;
  padding: 0px;
  transition: all 0.3s ease;
  margin-right: 5px;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2);
  cursor: hand;
  cursor: pointer;
}
ul li:hover {
  opacity: 0.6;
}
</style>
</head>
<body>
  <div class="emoji"></div>
<div class="container">
  <ul>
    <li class="is_active" color="#bc2828" emoji="	🍎">Apple</li>
    <li color="#d68a8a" emoji="πŸ‘">Peach</li>
    <li color="#dd7e28" emoji="🍊">Orange</li>
    <li color="#e0c44f" emoji="🍌">Banana</li>
    <li color="#92bf7b" emoji="🍐">Pear</li>
  </ul>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
var tabNames = [];
//loop thru all li element and grab all data, push them into an array of objects
$('li').each(function (index) {
  var _this = $(this);
  var elem = {};
  elem.name = _this.text();
  elem.color = _this.attr('color');
  elem.emoji = _this.attr('emoji');
  tabNames.push(elem);
  console.log(tabNames);
  //if this li is active, take those data and apply to body
  if (_this.hasClass('is_active')) {
    $('body').css('background-color', elem.color);
    $('.emoji').text(elem.emoji);
  } else {_this.text('');};
});

//on click change text value, bg data, emoji
$('li').on('click', function (e) {
  var _this = $(this);
  var _idx = _this.index();
  _this.addClass('is_active');
  _this.text(tabNames[_idx].name);
  $('body').css('background-color', tabNames[_idx].color);
  $('.emoji').text(tabNames[_idx].emoji);
  _this.siblings().text('');
  _this.siblings().removeClass('is_active');
});
    </script>
</body>
</html>

19. Exploring UI Animation NUM2

Made by Mario s Maselli. Another slider by Mario, it has slide up and slide down effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <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=Poppins:400,500,600,700,300);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
.hide {
  display: none;
}

*, *::after, *::before {
  box-sizing: border-box;
}

body, html {
  background: #E4E0E0;
  font-size: 6px;
  padding: 4rem 2rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Poppins", sans-serif;
}
@media (min-width: 860px) {
  body, html {
    font-size: 8px;
    padding: 3rem 5rem;
  }
}
@media (min-width: 1200px) {
  body, html {
    font-size: 10px;
    padding: 2rem 3rem;
  }
}

#icons {
  display: none;
}

.header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem 4rem;
  z-index: 20;
}
.header-wrapper .header {
  position: relative;
  display: block;
  width: 100%;
  height: 6rem;
}
.header-wrapper .menu-hamburger {
  position: relative;
  width: 1.3rem;
  display: inline-block;
  vertical-align: middle;
  background: black;
  height: 0.2rem;
  cursor: pointer;
}
.header-wrapper .menu-hamburger::before {
  content: "";
  width: 1.3rem;
  height: 0.2rem;
  background: black;
  position: absolute;
  top: -0.4rem;
}
.header-wrapper .menu-hamburger::after {
  content: "";
  width: 1.3rem;
  height: 0.2rem;
  background: black;
  position: absolute;
  top: 0.4rem;
}
.header-wrapper .menu-txt {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  text-transform: uppercase;
  cursor: pointer;
}
.header-wrapper .logo-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header-wrapper .logo {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 3rem;
  line-height: 1;
  font-weight: 600;
}
.header-wrapper .logo span {
  display: block;
}

.number-wrapper {
  position: absolute;
  height: 100%;
  width: 12rem;
  z-index: 10;
}
.number-wrapper .number-count {
  position: relative;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
}
.number-wrapper .number {
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-size: 12rem;
  color: #efefef;
  margin-left: -5rem;
  font-weight: 700;
}

.nav-wrapper {
  position: absolute;
  height: 100%;
  width: 12rem;
  padding: 0 4rem;
  top: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}
.nav-wrapper .nav-arrows {
  position: relative;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
}
.nav-wrapper .nav-up {
  opacity: 0;
}
.nav-wrapper .nav-up, .nav-wrapper .nav-down {
  width: 2rem;
  height: 3rem;
  cursor: pointer;
}
.nav-wrapper .nav-up svg, .nav-wrapper .nav-down svg {
  fill: #666666;
  width: 100%;
  max-height: 100%;
}
.nav-wrapper .nav-up svg:hover, .nav-wrapper .nav-down svg:hover {
  fill: black;
}
.nav-wrapper .nav-up {
  transform: rotate(180deg);
}
.nav-wrapper .nav-line {
  width: 100%;
  height: 0.1rem;
  background: black;
  margin: 1rem 0;
  background: #666666;
}

.slider-content {
  position: relative;
  max-width: 112rem;
  min-width: 480px;
  background: #fff;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 35px 20px rgba(79, 69, 66, 0.2);
}
.slider-content .slide {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slider-content .slide:after {
  content: "";
  display: table;
  clear: both;
}
.slider-content .slide:first-child .txt-wrapper span.copy {
  opacity: 1;
}
.slider-content .slide:nth-child(odd) .img {
  margin-left: 50%;
  transform: translateY(-100%);
}
.slider-content .slide:nth-child(odd) .txt {
  transform: translateY(100%);
}
.slider-content .slide:nth-child(even) .img {
  transform: translateY(100%);
}
.slider-content .slide:nth-child(even) .txt {
  margin-left: 50%;
  transform: translateY(-100%);
}
.slider-content .slide.active {
  position: absolute;
  z-index: 5;
}
.slider-content .slide.active .img, .slider-content .slide.active .txt {
  transform: translateY(0);
}

.slider-container {
  position: relative;
  height: 65rem;
  overflow: hidden;
}
.slider-container:after {
  content: "";
  display: table;
  clear: both;
}
.slider-container .slide-content {
  position: absolute;
  display: block;
  width: 50%;
  height: 100%;
  transition: transform 0.3s ease;
  transition-delay: 0.15s;
}
.slider-container .slide-content.txt {
  display: table;
  padding: 8rem 14rem;
  background: white;
}
.slider-container .slide-content .txt-wrapper {
  position: relative;
  display: table-cell;
  vertical-align: middle;
}
.slider-container .slide-content .txt-wrapper span.copy {
  position: relative;
  text-transform: uppercase;
  width: 2rem;
  display: block;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 4rem;
  font-weight: 500;
  opacity: 0;
}
.slider-container .slide-content .txt-wrapper h2 {
  margin: 0;
  font-size: 4.3rem;
  margin-bottom: 4rem;
  line-height: 1;
  font-weight: 600;
}
.slider-container .slide-content .txt-wrapper h2 span {
  display: block;
}
.slider-container .slide-content .txt-wrapper h3 {
  margin: 0;
  font-size: 2rem;
  margin-bottom: 2rem;
  line-height: 1;
  font-weight: 400;
}
.slider-container .slide-content .txt-wrapper h3 span {
  color: #ccc;
}
.slider-container .slide-content .txt-wrapper a {
  text-decoration: none;
  color: #AEACAB;
}
.slider-container .slide-content .txt-wrapper button {
  position: relative;
  padding: 1rem 3.5rem;
  color: white;
  text-align: center;
  display: block;
  border-radius: 3rem;
  background: #d02e2e;
  text-transform: uppercase;
  border: none;
  font-size: 1rem;
  margin-top: 3rem;
  font-weight: bold;
  outline: none;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.3);
}
.slider-container .slide-content .txt-wrapper .phone {
  display: block;
  color: black;
  font-size: 1.9rem;
}
.slider-container .slide-content .txt-wrapper .subtitle {
  display: block;
  text-transform: uppercase;
  color: #AEACAB;
  font-weight: bold;
  letter-spacing: 0.3rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.slider-container .slide-content .txt-wrapper p.excerpt {
  margin: 0;
  color: #AEACAB;
  font-size: 1.2rem;
  line-height: 1.5;
}
.slider-container .slide-content .txt-wrapper span.view-all {
  color: #AEACAB;
}
.slider-container .slide-content .txt-wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 1.5rem;
}
.slider-container .slide-content .txt-wrapper ul li {
  position: relative;
  margin: 1.5rem 0;
  padding: 0;
}
.slider-container .slide-content .txt-wrapper ul li:after {
  content: "";
  display: table;
  clear: both;
}
.slider-container .slide-content .txt-wrapper .date-wrapper {
  width: 20%;
  float: left;
  color: #AEACAB;
  text-align: left;
}
.slider-container .slide-content .txt-wrapper .date-wrapper .date {
  font-size: 1.7rem;
}
.slider-container .slide-content .txt-wrapper .date-wrapper .month {
  font-size: 1rem;
}
.slider-container .slide-content .txt-wrapper .post-wrapper {
  width: 80%;
  float: left;
}
.slider-container .slide-content .txt-wrapper .post-wrapper .post-title {
  display: block;
  font-size: 1.4rem;
  line-height: 1.3;
}
.slider-container .slide-content .txt-wrapper .post-wrapper .post-title a {
  display: block;
  color: black;
  cursor: pointer;
}
.slider-container .slide-content .txt-wrapper .post-wrapper .post-title a:hover {
  text-decoration: underline;
}
.slider-container .slide-content .txt-wrapper .post-wrapper .post-info {
  display: block;
  color: #AEACAB;
  font-size: 1rem;
}
.slider-container .slide-content .txt-wrapper .post-wrapper .post-info:after {
  content: "";
  display: table;
  clear: both;
}
.slider-container .slide-content .txt-wrapper .post-wrapper .post-info ul {
  margin: 0;
}
.slider-container .slide-content .txt-wrapper .post-wrapper .post-info li {
  float: left;
  margin: 0 0.5rem;
}
.slider-container .slide-content .txt-wrapper .post-wrapper .post-info li:first-child {
  margin-left: 0;
}
.slider-container .slide-content img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.footer {
  position: absolute;
  display: block;
  width: 100%;
  height: 6rem;
  bottom: 0;
  left: 0;
  padding: 2rem 4rem;
  z-index: 10;
}
.footer:after {
  content: "";
  display: table;
  clear: both;
}

.social-wrapper, .language-wrapper {
  position: relative;
}
.social-wrapper ul, .language-wrapper ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-wrapper li, .language-wrapper li {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.5rem;
}
.social-wrapper a, .language-wrapper a {
  text-decoration: none;
  color: black;
}

.social-wrapper {
  float: left;
}

.language-wrapper {
  float: right;
}
</style>
</head>
<body>
  <svg id="icons" xmlns="http://www.w3.org/2000/svg">  
<symbol id="icon-arrow" viewBox="0 0 476.213 476.213" >
<polygon fill="inherit" points="347.5,324.393 253.353,418.541 253.353,0 223.353,0 223.353,419.033 128.713,324.393 107.5,345.607 
	238.107,476.213 368.713,345.606 "/>
</symbol>
</svg>


<div class="slider-content">
  
  <div class="header-wrapper">
    <div class="header">
      <div class="menu-wrapper">
        <div class="menu-hamburger"></div>
        <div class="menu-txt">Menu</div>
      </div>
      <div class="logo-wrapper">
        <div class="logo"><span>Mr.</span> Bara</div>
      </div>
      <div class="shop-wrapper"></div>
    </div>
  </div>
  
  <div class="number-wrapper">
    <div class="number-count">
      <div class="number">01</div>
    </div>
  </div>
  
  <div class="nav-wrapper">
    <div class="nav-arrows">
      <div class="nav-up">
           <svg id="arrow-up">
            <use xlink:href="#icon-arrow"></use>
          </svg>
       </div>
      <div class="nav-line"></div>
      <div class="nav-down">
         <svg id="arrow-down">
            <use xlink:href="#icon-arrow"></use>
          </svg>
      </div>
    </div>
  </div>
  
  <div class="slider-wrapper">
    <div class="slider-container">                       
      <div class="slide active" data-order="1">
          <div class="slide-content txt">
            <div class="txt-wrapper">
              <span class="copy">Intro about me</span>
              <h2><span>Hello!</span> I’m Mr.Bara</h2>
              <span class="subtitle">Fashion designer</span>
              <p class="excerpt">I combine the best of our skills and ideas to present you products really worth your attention that will change the way you think about design, structure, color and website itself. </p>
            </div>
          </div>
          <div class="slide-content img">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/slider1.jpg" alt="" />
          </div>
        </div>  
      <div class="slide" data-order="2">
          <div class="slide-content txt">
            <div class="txt-wrapper">
              <span class="copy">Show with me</span>
              <h2><span>Love Simple</span> Fashion</h2>
               <p class="excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
               <button>Shop now</button>
            </div>
          </div>
          <div class="slide-content img">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/slide2.jpg" alt="" />
          </div>
        </div>  
      <div class="slide " data-order="3">
          <div class="slide-content txt">
            <div class="txt-wrapper">
              <span class="copy">Fashion around me</span>
              <ul>
                <li>
                  <div class="date-wrapper">
                    <div class="date">25</div>
                    <div class="month">April</div>
                  </div>
                  <div class="post-wrapper">
                    <div class="post-title"><a href="">Top colour pantone for fashion 2016</a></div>
                    <div class="post-info"> 
                      <ul>
                        <li>Admin /</li>
                        <li>Discovery /</li>
                        <li>15 comments</li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="date-wrapper">
                    <div class="date">18</div>
                    <div class="month">April</div>
                  </div>
                  <div class="post-wrapper">
                    <div class="post-title"><a href="">Inspiration for fashion for Logan's designer</a></div>
                    <div class="post-info"> 
                      <ul>
                        <li>Admin /</li>
                        <li>Inspirations /</li>
                        <li>08 comments</li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="date-wrapper">
                    <div class="date">06</div>
                    <div class="month">April</div>
                  </div>
                  <div class="post-wrapper">
                    <div class="post-title"><a href="">Hipster -Fashion trand this summer</a></div>
                    <div class="post-info"> 
                      <ul>
                        <li>Admin /</li>
                        <li>Discovery /</li>
                        <li>22 comments</li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
              <span class="view-all">View all articles</span> 
             
            </div>
          </div>
          <div class="slide-content img">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/slide3.jpg" alt="" />
          </div>
        </div>
      <div class="slide " data-order="4">
          <div class="slide-content txt">
            <div class="txt-wrapper">
              <span class="copy">What clients say</span>
              <h2><span>Mr.Bara</span> Best Choice </h2>
              <p class="excerpt">I combine the best of our skills and ideas to present you products really worth your attention that will change the way you think about design, structure, color and website itself. </p>
            </div>
          </div>
          <div class="slide-content img">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/slide4.jpg" alt="" />
          </div>
        </div>
      <div class="slide " data-order="5">
          <div class="slide-content txt">
            <div class="txt-wrapper">
              <span class="copy">Keep in touch</span>
              <h3>Melbourne, <span>Australia</span></h3>
              <p class="excerpt">269 King Str, 05th Floor, Utral House Building. Melbourne. VIC 3000. Australia</p>
              <p><strong>Email:</strong> <a href="/cdn-cgi/l/email-protection#1974786b70766a742821597e74787075377a7674"><span class="__cf_email__" data-cfemail="771a16051e18041a464f37101a161e1b5914181a">[email&#160;protected]</span></a></p>
              <p>Call directly: <span class="phone">+99 (0) 344 956 4050</span></p>
            </div>
          </div>
          <div class="slide-content img">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/slide5.jpg" alt="" />
          </div>
        </div>
    </div>
  </div>
  <div class="footer">
    <div class="social-wrapper">
      <ul>
        <li><a href="">Codepen</a></li>
        <li><a href="">Dribbble</a></li>
        <li><a href="">Behance</a></li>
      </ul>
    </div>
    <div class="language-wrapper">
      <ul>
        <li><a href="">EN</a></li>
        <li><a href="">ES</a></li>
      </ul>
    </div>
  </div>
</div>
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
      <script id="rendered-js" >
/*
Check out the original dribbble shot
https://dribbble.com/shots/2797559-Mr-bara-Split-Screen
*/



const up = $('.nav-up');
const down = $('.nav-down');
let counter = 1;
let number = $('.number');

function moveDown(currentSlide) {

  var nextSlide = currentSlide.next();
  var currentSlideUp = currentSlide.find('.txt');
  var currentSlideDown = currentSlide.find('.img');
  var nextSlideUp = nextSlide.find('.img');
  var nextSlideDown = nextSlide.find('.txt');
  let currentCopy = currentSlide.find('.copy');
  let nextCopy = nextSlide.find('.copy');

  if (nextSlide.length !== 0) {

    counter = counter + 1;

    if (counter % 2 === 0) {

      TweenMax.to(number, 0.3, { x: '-100%' });
      TweenMax.to(currentSlideUp, 0.4, { y: '-100%', delay: 0.15 });
      TweenMax.to(currentSlideDown, 0.4, { y: '100%', delay: 0.15 });
      setTimeout(function () {number.html('');}, 300);

    } else {

      number.html('0' + counter);
      TweenMax.to(number, 0.3, { x: '0%', delay: 1 });
      TweenMax.to(currentSlideUp, 0.4, { y: '100%', delay: 0.15 });
      TweenMax.to(currentSlideDown, 0.4, { y: '-100%', delay: 0.15 });
    }

    TweenMax.to(currentCopy, 0.3, { autoAlpha: 0, delay: 0.15 });
    TweenMax.to(nextCopy, 0.3, { autoAlpha: 1, delay: 1 });
    TweenMax.to(nextSlideUp, 0.4, { y: '0%', delay: 0.15 });
    TweenMax.to(nextSlideDown, 0.4, { y: '0%', delay: 0.15 });

    $(currentSlide).removeClass('active');
    $(nextSlide).addClass('active');

  }
}

function moveUp(currentSlide) {

  var prevSlide = currentSlide.prev();
  var currentSlideUp = currentSlide.find('.img');
  var currentSlideDown = currentSlide.find('.txt');
  var prevSlideUp = prevSlide.find('.txt');
  var prevSlideDown = prevSlide.find('.img');
  let currentCopy = currentSlide.find('.copy');
  let prevCopy = prevSlide.find('.copy');

  if (prevSlide.length !== 0) {

    counter = counter - 1;

    if (counter % 2 === 0) {


      TweenMax.to(number, 0.3, { x: '-100%' });
      TweenMax.to(currentSlideUp, 0.4, { y: '-100%', delay: 0.15 });
      TweenMax.to(currentSlideDown, 0.4, { y: '100%', delay: 0.15 });
      setTimeout(function () {number.html('');}, 300);


    } else {

      number.html('0' + counter);
      TweenMax.to(number, 0.3, { x: '0%', delay: 1 });
      TweenMax.to(currentSlideUp, 0.4, { y: '100%', delay: 0.15 });
      TweenMax.to(currentSlideDown, 0.4, { y: '-100%', delay: 0.15 });
    }

    TweenMax.to(currentCopy, 0.3, { autoAlpha: 0, delay: 0.15 });
    TweenMax.to(prevCopy, 0.3, { autoAlpha: 1, delay: 1 });
    TweenMax.to(prevSlideUp, 0.4, { y: '0%', delay: 0.15 });
    TweenMax.to(prevSlideDown, 0.4, { y: '0%', delay: 0.15 });

    $(currentSlide).removeClass('active');
    $(prevSlide).addClass('active');

  }

}

function hideNav() {

  if (counter == $('.slide').length) {
    TweenMax.to($('.nav-down'), 0.5, { autoAlpha: 0, delay: 0.5 });
  } else {
    TweenMax.to($('.nav-down'), 0.5, { autoAlpha: 1, delay: 0.5 });
  }
  if (counter === 1) {
    TweenMax.to($('.nav-up'), 0.5, { autoAlpha: 0, delay: 0.5 });
  } else {
    TweenMax.to($('.nav-up'), 0.5, { autoAlpha: 1, delay: 0.5 });
  }

}


down.on('click', function () {

  var currentSlide = $('.active');
  moveDown(currentSlide);
  hideNav();

});

up.on('click', function () {

  var currentSlide = $('.active');
  moveUp(currentSlide);
  hideNav();

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

20. Flexbox slider

Made by Robert. Simple Flexbox Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<style>
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNr5TRF.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjXhFVZNyE.ttf) format('truetype');
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font: 18px 'Noto Sans', Arial, sans-serif;
  background: #333;
}
body {
  padding: 20px;
}
h1 {
  text-align: center;
  color: #f0f0f0;
  margin-bottom: 1em;
}
.sticky {
  width: 100px;
  text-align: center;
  color: #be2221;
  font-size: 16px;
  background: #f0f0f0;
  line-height: 250px;
}
.wrap {
  display: flex;
  align-items: stretch;
  width: 90%;
  margin: auto;
}
button {
  width: 30px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 40px;
  text-align: center;
  outline: none;
  opacity: 0.5;
  transition: opacity 300ms ease-out;
}
button:hover {
  opacity: 1;
}
.scroller {
  flex: 1;
  overflow: hidden;
}
.items {
  list-style-type: none;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  transition: transform 1s ease-in-out;
}
.item {
  padding: 30px 20px;
  display: inline-block;
  width: 100%;
  height: 250px;
  font-size: 25px;
  letter-spacing: -0.03em;
  line-height: 1;
  font-weight: bold;
  background-size: cover;
  background-position: 50% 50%;
  text-transform: uppercase;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.item:nth-child(2) {
  color: #fff;
}
</style>
</head>
<body>
  <h1>Flexbox Slider</h1>
<div class="wrap">
  <button onclick="prev()">&laquo;</button>
  <div class="sticky">β™₯</div>
  <div class="scroller">
    <ul class="items">
      <li class="item" style="background-image:url(https://farm6.staticflickr.com/5076/14164379250_71c3a5b32a_b.jpg);">HAMBURG</li>
      <li class="item" style="background-image:url(https://farm3.staticflickr.com/2937/14371160993_186df4a083_b.jpg);">URBAN LIGHTS</li>
      <li class="item" style="background-image:url(https://farm3.staticflickr.com/2914/14185397280_e51c40b1df_b.jpg);">SOUNDS</li>
    </ul>
  </div>
  <button onclick="next()">&raquo;</button>
</div>
      <script id="rendered-js" >
var d = document;
var wrap = d.querySelector('.wrap');
var items = d.querySelector('.items');
var itemCount = d.querySelectorAll('.item').length;
var scroller = d.querySelector('.scroller');
var pos = 0;
var transform = Modernizr.prefixed('transform');

function setTransform() {
  items.style[transform] = 'translate3d(' + -pos * items.offsetWidth + 'px,0,0)';
}

function prev() {
  pos = Math.max(pos - 1, 0);
  setTransform();
}

function next() {
  pos = Math.min(pos + 1, itemCount - 1);
  setTransform();
}

window.addEventListener('resize', setTransform);
    </script>
</body>
</html>

21. HTML5 Video Before-and-After Comparison Slider

Made by Dudley Storey. Before-and-After Comparison Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
body {
  background: #333;
  margin: 2rem;
}
#video-compare-container {
  display: inline-block;
  line-height: 0;
  position: relative;
  width: 100%;
  padding-top: 42.3%;
}
#video-compare-container > video {
  width: 100%;
  position: absolute;
  top: 0; height: 100%;
}
#video-clipper {
  width: 50%; position: absolute;
  top: 0; bottom: 0;
  overflow: hidden;
}
#video-clipper video {
  width: 200%;
  postion: absolute;
  height: 100%;
}
</style>
</head>
<body>
  <div id="video-compare-container">
  <video loop autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dirty.jpg">
    <source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.mp4>
    <source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.webm>
  </video>
 <div id="video-clipper">
    <video loop autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/clean.jpg">
      <source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.mp4>
      <source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.webm>
    </video>
  </div>
	</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
function trackLocation(e) {
  var rect = videoContainer.getBoundingClientRect(),
  position = (e.pageX - rect.left) / videoContainer.offsetWidth * 100;
  if (position <= 100) {
    videoClipper.style.width = position + "%";
    clippedVideo.style.width = 100 / position * 100 + "%";
    clippedVideo.style.zIndex = 3;
  }
}
var videoContainer = document.getElementById("video-compare-container"),
videoClipper = document.getElementById("video-clipper"),
clippedVideo = videoClipper.getElementsByTagName("video")[0];
videoContainer.addEventListener("mousemove", trackLocation, false);
videoContainer.addEventListener("touchstart", trackLocation, false);
videoContainer.addEventListener("touchmove", trackLocation, false);
    </script>
</body>
</html>

22. Linear slider with SplitText effect | Greensock

Made by Arden. Linear slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <script src="https://use.typekit.net/vms5sey.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
<style>
* {
  box-sizing: border-box;
}

body {
  color: #333;
  font-family: "industry", sans-serif;
}

.slider {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.slider__container {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.slider__item {
  position: absolute;
  width: 100%;
  height: 100vh;
}
.slider__itemImage {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.slider__itemImage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Rectangle 1: */
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.slider__itemText {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  font-size: 1rem;
  color: #fff;
}
.slider__itemTitle {
  text-transform: uppercase;
  width: 100%;
  padding: 0 2em;
  font-size: 2em;
  font-weight: 300;
  text-align: center;
  margin: 0.5rem 0 0;
  font-weight: 300;
}
@media (min-width: 60em) {
  .slider__itemTitle {
    font-size: 4em;
    width: 50%;
    margin: 0 auto;
    padding: 0;
  }
}
.slider__itemSubtitle {
  width: 40%;
  font-size: 1.25em;
  text-align: center;
  line-height: 1.4;
  display: none;
}
.slider__prev, .slider__next {
  cursor: default;
  z-index: 50;
  width: 0.875em;
}
.slider__prev svg, .slider__next svg {
  display: block;
  width: 100%;
  height: auto;
}
.slider__prev.is-active, .slider__next.is-active {
  cursor: pointer;
}
.slider__prev {
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
}
.slider__next {
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
}

.navThumbs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navThumbs__item {
  width: 75px;
  height: 40px;
  background-size: cover;
  background-position: center;
  float: left;
  margin: 0 0.5em;
  cursor: pointer;
}
@media (min-width: 60em) {
  .navThumbs__item {
    width: 150px;
    height: 100px;
  }
}
.navThumbs__item.is-active {
  opacity: 0.5;
  cursor: default;
}
</style>
</head>

<body translate="no" >
  <div class="slider" id="slider">
  <ul class="slider__container">
    <li class="slider__item is-active">
      <figure class="slider__itemImage" style="background-image:url(https://c2.staticflickr.com/4/3514/3966939242_e29867a563_b.jpg)"></figure>
      <div class="slider__itemText">
        <h2 class="slider__itemTitle">Wayfarers post ironic synth</h2>
      </div>
    </li>
    <li class="slider__item">     
      <figure class="slider__itemImage" style="background-image:url(https://c1.staticflickr.com/3/2538/3962063373_0e822b6884_b.jpg)"></figure>
      <div class="slider__itemText">
        <h2 class="slider__itemTitle">DIY shoreditch vegan swag</h2>
      </div>
    </li>
    <li class="slider__item">     
      <figure class="slider__itemImage" style="background-image:url(https://c2.staticflickr.com/4/3432/3962896089_61f26f53d4_b.jpg)"></figure>
      <div class="slider__itemText">
        <h2 class="slider__itemTitle">Small batch bespoke thundercats</h2>
      </div>
    </li>
    <li class="slider__item">     
      <figure class="slider__itemImage" style="background-image:url(https://c2.staticflickr.com/4/3437/3958614732_3a528b9648_b.jpg)"></figure>
      <div class="slider__itemText">
        <h2 class="slider__itemTitle">Flannel kale chips selvage kitsch</h2>
      </div>
    </li>
  </ul>
  <div class="slider__prev">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="32" viewBox="-1 -1 12 32">
      <path d="M 10,0 0,15 10,30" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
  <div class="slider__next is-active">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="32" viewBox="-1 -1 12 32">
      <path d="M0 0l10 15L0 30" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
  <ul class="navThumbs">
    <li class="navThumbs__item is-active" style="background-image:url(https://c2.staticflickr.com/4/3514/3966939242_e29867a563_b.jpg);"></li>
    <li class="navThumbs__item" style="background-image:url(https://c1.staticflickr.com/3/2538/3962063373_0e822b6884_b.jpg);"></li>
    <li class="navThumbs__item" style="background-image:url(https://c2.staticflickr.com/4/3432/3962896089_61f26f53d4_b.jpg);"></li>
    <li class="navThumbs__item" style="background-image:url(https://c2.staticflickr.com/4/3437/3958614732_3a528b9648_b.jpg);"></li>
  </ul>
</div>

<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js'></script>
      <script id="rendered-js" >
/* Get index of element
http://stackoverflow.com/questions/27854824/vanilla-js-replacements-for-jquerys-index-and-eq*/
function index(element) {
  var sib = element.parentNode.childNodes;
  var n = 0;
  for (var i = 0; i < sib.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (sib[i] == element) return n;
    if (sib[i].nodeType == 1) n++;
  }window.CP.exitedLoop(0);
  return -1;
};

function getSiblings(elem) {
  var siblings = [];
  var sibling = elem.parentNode.firstChild;
  for (; sibling; sibling = sibling.nextSibling) {if (window.CP.shouldStopExecution(1)) break;
    if (sibling.nodeType === 1 && sibling !== elem) {
      siblings.push(sibling);
    }
  }window.CP.exitedLoop(1);
  return siblings;
};

var Slider = function () {
  var
  slider,
  activeSlide,
  slides,
  slideWidth,
  slideNavPrev,
  slideNavNext,
  slideNavThumbs;

  var _init = function () {
    slider = document.getElementById('slider');
    slideContainer = document.getElementsByClassName('slider__container')[0];
    activeSlide = document.getElementsByClassName('is-active')[0];
    slides = document.getElementsByClassName('slider__item');
    slides = Array.prototype.slice.call(slides, 0);
    slideNavPrev = document.getElementsByClassName('slider__prev')[0];
    slideNavNext = document.getElementsByClassName('slider__next')[0];
    slideNavThumbs = document.getElementsByClassName('navThumbs__item');
    slideNavThumbs = Array.prototype.slice.call(slideNavThumbs, 0);
    slideWidth = parseInt(getComputedStyle(slideContainer).width);

    _prepare();
    _addEventHandlers();
    _animateFirst();
  };

  var _addEventHandlers = function () {
    slideNavNext.addEventListener('click', _goToNext, false);
    slideNavPrev.addEventListener('click', _goToPrev, false);
    // document.addEventListener("keydown", handleKeyboardNav, false);
    slideNavThumbs.forEach(function (element, index) {
      element.classList.remove('is-active');
      element.addEventListener('click', _goToClicked, false);
    });
  };

  var _prepare = function () {
    slides.forEach(function (element, index) {
      if (!element.classList.contains('is-active')) {
        TweenLite.set(element, { autoAlpha: 0 });
      }
    });
    TweenLite.set(slideNavPrev, { autoAlpha: 0.2 });
  };

  var _animateFirst = function () {

    var slideInTitle = activeSlide.children[1].children[0];
    slideInTitle = new SplitText(slideInTitle);
    var _resetTitle = function () {
      splitSlideInTitle.revert();
    };

    var tl = new TimelineLite({ onComplete: _resetTitle });
    tl.
    staggerFromTo(slideInTitle.chars, 0.6, { opacity: 0, scale: 0, y: 80, rotationX: 180, transformOrigin: "0% 50% -50", ease: Back.easeOut }, { opacity: 1, scale: 1, y: 0, rotationX: 0 }, 0.03, '-=0.3');
  };

  var _animateNext = function (slideOut, slideIn) {
    var slideOutTitle = slideOut.children[1].children[0];
    var slideOutSubtitle = slideOut.children[1].children[1];
    var size = slides.length;

    if (slideIn) {
      var slideInTitle = slideIn.children[1].children[0];
      var splitSlideInTitle = new SplitText(slideInTitle);
      var slideInSubtitle = slideIn.children[1].children[1];
      var _resetTitle = function () {
        splitSlideInTitle.revert();
      };

      var tl = new TimelineLite({ onComplete: _resetTitle });
      tl.
      set(slideIn, { x: '100%', autoAlpha: 1, className: '+=is-active' }).
      set(slideOut, { className: '-=is-active' }).
      to(slideOutTitle, 0.3, { autoAlpha: 0, y: -50, ease: Power2.easeOut }, 0).
      to(slideOut, 0.9, { x: '-100%', ease: Power2.easeOut }, 0).
      to(slideIn, 0.9, { x: '-=100%', ease: Power2.easeOut }, 0).
      staggerFromTo(splitSlideInTitle.chars, 0.6, { opacity: 0, scale: 0, y: 80, rotationX: 180, transformOrigin: "0% 50% -50", ease: Back.easeOut }, { opacity: 1, scale: 1, y: 0, rotationX: 0 }, 0.03, '-=0.3');
      if (index(slideIn) === size - 1) {
        TweenLite.to(slideNavNext, 0.3, { autoAlpha: 0.2, ease: Linear.easeNone, className: '-=is-active' });
      }
    }
    TweenLite.set(slideNavPrev, { autoAlpha: 1, className: '+=is-active' });
  };

  var _goToNext = function () {
    var slideOut = document.getElementsByClassName('is-active')[0];
    var slideIn = slideOut.nextElementSibling;
    _animateNext(slideOut, slideIn);
  };

  var _animatePrev = function (slideOut, slideIn) {
    var slideOutTitle = slideOut.children[1].children[0];
    var tl = new TimelineLite();

    if (slideIn) {
      var slideInTitle = slideIn.children[1].children[0];
      var _resetTitle = function () {
        splitSlideInTitle.revert();
      };
      var splitSlideInTitle = new SplitText(slideInTitle);
      var tl = new TimelineLite({ onComplete: _resetTitle });
      tl.
      set(slideIn, { x: '-100%', autoAlpha: 1, className: '+=is-active' }).
      set(slideOut, { className: '-=is-active' }).
      set(slideInTitle, { y: 0, autoAlpha: 1 }).
      to(slideOut, 0.9, { x: '100%', ease: Power2.easeOut }, 0).
      to(slideIn, 0.9, { x: '+=100%', ease: Power2.easeOut }, 0).
      staggerFromTo(splitSlideInTitle.chars, 0.8, {
        opacity: 0,
        scale: 0,
        y: 80,
        rotationX: 180,
        transformOrigin: "0% 50% -50",
        ease: Back.easeOut },

      {
        opacity: 1,
        scale: 1,
        y: 0,
        rotationX: 0 },
      0.03, '-=0.3');
      if (index(slideIn) === 0) {
        TweenLite.to(slideNavPrev, 0.3, { autoAlpha: 0.2, ease: Linear.easeNone, className: '-=is-active' });
      }
    }
    TweenLite.set(slideNavNext, { autoAlpha: 1, className: '+=is-active' });
  };

  var _goToPrev = function () {
    var slideOut = document.getElementsByClassName('is-active')[0];
    var slideIn = slideOut.previousElementSibling;
    _animatePrev(slideOut, slideIn);
  };

  var _goToClicked = function () {
    var clickedSlide = index(this);
    var slideOut = document.getElementsByClassName('is-active')[0];
    var slideIn = document.getElementsByClassName('slider__item')[clickedSlide];
    var siblings = getSiblings(this);
    siblings.forEach(function (element, index) {
      element.classList.remove('is-active');
    });
    if (clickedSlide > index(slideOut)) {
      this.classList.add('is-active');
      _animateNext(slideOut, slideIn);
    } else if (index(slideOut) > clickedSlide) {
      this.classList.add('is-active');
      _animatePrev(slideOut, slideIn);
    }
  };


  var handleKeyboardNav = function (e) {
    if (!e) e = window.event;
    var kc = e.keyCode;
    if (kc == 37) _goToPrev();
    if (kc == 39) _goToNext();
  };

  return {
    init: _init };

}();

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

23. Simple popup slider

Made by Alex TuΘ™inean. Source

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript image slider</title>
    </head>
    <body>
        <style>
            .slider {
    width: 91vw; height: 45vh;
    overflow:hidden;
    position:relative;
    margin:2.5%;
    top:27.5vh;
    left:0;
}

/*You can always customize the slides, make them better than mine :) */
.slide {
    width: 100%; height: 100%;
    transition:left 0.75s, transform 0.75s;
    position:absolute;
    left:0; top:0;
    transition-timing-function:ease-out;
    border-radius:10vmin;
    text-align:center;
    color:white;
    font-weight:bold;
    font-style:italic;
    text-shadow:-1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black, 1px 1px 1px black;
}

#slide1{
    background:url("https://imgur.com/Tj5yPSD.jpg");
    background-size:cover;
    background-position:center;
}
#slide2{
    background:url("https://imgur.com/i3yIG0a.jpg");
    background-size:cover;
    background-position:center;
}
#slide3{
    background:url("https://imgur.com/ofiji70.jpg");
    background-size:cover;
    background-position:center;
}
#slide4{
    background:url("https://imgur.com/bSYWLyi.jpg");
    background-size:cover;
    background-position:center;
}
#slide5{
    background:url("https://imgur.com/xRER3FM.jpg");
    background-size:cover;
    background-position:center;
}

/*Buttons*/
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    z-index:2;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

            </style>
        <div class = "slider">
            <div class ="slide" id = "slide1">1</div>
            <div class ="slide" id = "slide2">2</div>
            <div class ="slide" id = "slide3">3</div>
            <div class ="slide" id = "slide4">4</div>
            <div class ="slide" id = "slide5">5</div>
            <!--You can add how many slides you want here, and the code wil work (as long as you add the CSS it require -->
            <a class="prev" onclick="thisImage(-1)">&#10094;</a>
            <a class="next" onclick="thisImage(1)">&#10095;</a>
        </div>
    </body>
    <script>
        let autoSlide;
window.onload = function(){
    autoSlide= setInterval(function(){
        thisImage(1);
    },4000);
    //A little error you can solve by just calling the function with 0, once.
    thisImage(0);
};

var currentImage=0;

//changing the slide.
function thisImage(val){
    //See line 39
    clearInterval(autoSlide);
    //
    
    currentImage+=val;
    //When you are at the last slide, and tap Next button, the first slide appears.
    if(currentImage > document.getElementsByClassName("slide").length - 1 && val == "1") currentImage=0;
    //When you are at the first slide, and tap Previous button, the last slide appears.
    if(currentImage < 0 && val == "-1") currentImage=document.getElementsByClassName("slide").length - 1;
    //Selecting all images from the left of the current image.       l l l S r r
    for(leftImg = 0; leftImg <= currentImage; leftImg++){
        //Left images are in the left side of the screen.
        document.getElementsByClassName("slide")[leftImg].style.left="-100vw";
        document.getElementsByClassName("slide")[leftImg].style.transform = "scale(0)";
    }
    //Selecting all images from the right of the current image.       l l l S r r
    for(rightImg = currentImage+1; rightImg < document.getElementsByClassName("slide").length; rightImg++){
        //Right images are in the right side of the screen.
        document.getElementsByClassName("slide")[rightImg].style.left="100vw";
        document.getElementsByClassName("slide")[rightImg].style.transform = "scale(0)";
    }
    //This is the current slide:
    document.getElementsByClassName("slide")[currentImage].style.left="0";
    document.getElementsByClassName("slide")[currentImage].style.transform = "scale(1)";
    //Adding auto slide function. When you press the buttons to change the slide, the interval stops
    autoSlide= setInterval(function(){
        thisImage(1);
    },4000);
}
        </script>
</html>

24. Pure CSS Carousel

Made by Jenning. CSS Slider with buttons, clicking the buttons will change the slide. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Sulphur+Point&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
.carousel {
  margin: auto;
  width: 60vmin;
  height: 35vmin;
  background: #191919;
  position: relative;
  box-shadow: 20px 20px #F15025;
}
.carousel:before, .carousel:after {
  position: absolute;
  font-size: 12px;
  color: white;
  text-align: center;
  width: 100%;
}
.carousel:before {
  content: "Pure CSS carousel";
  bottom: calc(100% + 4px);
}
.carousel:after {
  content: "Click on the dots to change slides";
  position: absolute;
  top: calc(100% + 4px);
  -webkit-animation: blink 0.6s ease infinite;
          animation: blink 0.6s ease infinite;
}
.carousel__stage {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.carousel__item-input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.carousel__item-input:nth-child(1):checked ~ .carousel__item-label:nth-child(11) {
  background: #F15025;
}
.carousel__item-input:nth-child(1):checked ~ .carousel__item-label:nth-child(11):before {
  display: block;
}
.carousel__item-input:nth-child(1):checked ~ .carousel__item-content:nth-child(6) {
  transform: translate(0%);
}
.carousel__item-input:nth-child(1):checked ~ .carousel__item-content:nth-child(7) {
  transform: translate(100%);
}
.carousel__item-input:nth-child(1):checked ~ .carousel__item-content:nth-child(8) {
  transform: translate(200%);
}
.carousel__item-input:nth-child(1):checked ~ .carousel__item-content:nth-child(9) {
  transform: translate(300%);
}
.carousel__item-input:nth-child(1):checked ~ .carousel__item-content:nth-child(10) {
  transform: translate(400%);
}
.carousel__item-input:nth-child(2):checked ~ .carousel__item-label:nth-child(12) {
  background: #F15025;
}
.carousel__item-input:nth-child(2):checked ~ .carousel__item-label:nth-child(12):before {
  display: block;
}
.carousel__item-input:nth-child(2):checked ~ .carousel__item-content:nth-child(6) {
  transform: translate(-100%);
}
.carousel__item-input:nth-child(2):checked ~ .carousel__item-content:nth-child(7) {
  transform: translate(0%);
}
.carousel__item-input:nth-child(2):checked ~ .carousel__item-content:nth-child(8) {
  transform: translate(100%);
}
.carousel__item-input:nth-child(2):checked ~ .carousel__item-content:nth-child(9) {
  transform: translate(200%);
}
.carousel__item-input:nth-child(2):checked ~ .carousel__item-content:nth-child(10) {
  transform: translate(300%);
}
.carousel__item-input:nth-child(3):checked ~ .carousel__item-label:nth-child(13) {
  background: #F15025;
}
.carousel__item-input:nth-child(3):checked ~ .carousel__item-label:nth-child(13):before {
  display: block;
}
.carousel__item-input:nth-child(3):checked ~ .carousel__item-content:nth-child(6) {
  transform: translate(-200%);
}
.carousel__item-input:nth-child(3):checked ~ .carousel__item-content:nth-child(7) {
  transform: translate(-100%);
}
.carousel__item-input:nth-child(3):checked ~ .carousel__item-content:nth-child(8) {
  transform: translate(0%);
}
.carousel__item-input:nth-child(3):checked ~ .carousel__item-content:nth-child(9) {
  transform: translate(100%);
}
.carousel__item-input:nth-child(3):checked ~ .carousel__item-content:nth-child(10) {
  transform: translate(200%);
}
.carousel__item-input:nth-child(4):checked ~ .carousel__item-label:nth-child(14) {
  background: #F15025;
}
.carousel__item-input:nth-child(4):checked ~ .carousel__item-label:nth-child(14):before {
  display: block;
}
.carousel__item-input:nth-child(4):checked ~ .carousel__item-content:nth-child(6) {
  transform: translate(-300%);
}
.carousel__item-input:nth-child(4):checked ~ .carousel__item-content:nth-child(7) {
  transform: translate(-200%);
}
.carousel__item-input:nth-child(4):checked ~ .carousel__item-content:nth-child(8) {
  transform: translate(-100%);
}
.carousel__item-input:nth-child(4):checked ~ .carousel__item-content:nth-child(9) {
  transform: translate(0%);
}
.carousel__item-input:nth-child(4):checked ~ .carousel__item-content:nth-child(10) {
  transform: translate(100%);
}
.carousel__item-input:nth-child(5):checked ~ .carousel__item-label:nth-child(15) {
  background: #F15025;
}
.carousel__item-input:nth-child(5):checked ~ .carousel__item-label:nth-child(15):before {
  display: block;
}
.carousel__item-input:nth-child(5):checked ~ .carousel__item-content:nth-child(6) {
  transform: translate(-400%);
}
.carousel__item-input:nth-child(5):checked ~ .carousel__item-content:nth-child(7) {
  transform: translate(-300%);
}
.carousel__item-input:nth-child(5):checked ~ .carousel__item-content:nth-child(8) {
  transform: translate(-200%);
}
.carousel__item-input:nth-child(5):checked ~ .carousel__item-content:nth-child(9) {
  transform: translate(-100%);
}
.carousel__item-input:nth-child(5):checked ~ .carousel__item-content:nth-child(10) {
  transform: translate(0%);
}
.carousel__item-content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  font-size: 16vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 4px 4px #F15025;
  color: white;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  will-change: transform;
}
.carousel__item-content:nth-child(6) {
  z-index: 5;
  background: rgba(230, 232, 230, 0.84);
}
.carousel__item-content:nth-child(7) {
  z-index: 4;
  background: rgba(230, 232, 230, 0.68);
}
.carousel__item-content:nth-child(8) {
  z-index: 3;
  background: rgba(230, 232, 230, 0.52);
}
.carousel__item-content:nth-child(9) {
  z-index: 2;
  background: rgba(230, 232, 230, 0.36);
}
.carousel__item-content:nth-child(10) {
  z-index: 1;
  background: rgba(230, 232, 230, 0.2);
}
.carousel__item-label {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid #F15025;
  background: transparent;
  border-radius: 50%;
  z-index: 1;
  bottom: 10px;
  left: 50%;
  cursor: pointer;
  z-index: 6;
}
.carousel__item-label:nth-child(11) {
  transform: translateX(-53px);
}
.carousel__item-label:nth-child(12) {
  transform: translateX(-28px);
}
.carousel__item-label:nth-child(13) {
  transform: translateX(-3px);
}
.carousel__item-label:nth-child(14) {
  transform: translateX(22px);
}
.carousel__item-label:nth-child(15) {
  transform: translateX(47px);
}
.carousel__item-label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #F15025;
  -webkit-animation: ripple 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
          animation: ripple 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
  display: none;
}

@-webkit-keyframes blink {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
}
@-webkit-keyframes ripple {
  0%, 100% {
    opacity: 0;
  }
  15% {
    opacity: 0.6;
  }
  0% {
    transform: scale(0);
  }
  100%, 85% {
    transform: scale(5);
  }
}
@keyframes ripple {
  0%, 100% {
    opacity: 0;
  }
  15% {
    opacity: 0.6;
  }
  0% {
    transform: scale(0);
  }
  100%, 85% {
    transform: scale(5);
  }
}
html, body {
  width: 100%;
  height: 100%;
  display: flex;
  font-family: "Sulphur Point", sans-serif;
  background: #191919;
}
</style>
</head>
<body>
  <div class="carousel">
  <div class="carousel__stage">
    <input class="carousel__item-input" type="radio" name="item" id="input_0" checked="checked"/>
    <input class="carousel__item-input" type="radio" name="item" id="input_1"/>
    <input class="carousel__item-input" type="radio" name="item" id="input_2"/>
    <input class="carousel__item-input" type="radio" name="item" id="input_3"/>
    <input class="carousel__item-input" type="radio" name="item" id="input_4"/>
    <div class="carousel__item-content">0</div>
    <div class="carousel__item-content">1</div>
    <div class="carousel__item-content">2</div>
    <div class="carousel__item-content">3</div>
    <div class="carousel__item-content">4</div>
    <label class="carousel__item-label" for="input_0"></label>
    <label class="carousel__item-label" for="input_1"></label>
    <label class="carousel__item-label" for="input_2"></label>
    <label class="carousel__item-label" for="input_3"></label>
    <label class="carousel__item-label" for="input_4"></label>
  </div>
</div>
      <script id="rendered-js" >
/*
	no JS >|
*/
    </script>
</body>
</html>
 

25. simple slider with buttons

Made by Sam Gord. Source

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">

<style>
/*==================
    Base Styles
===================*/

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

input[type="radio"] {
    display: none;
}

.container {
    background: rgb(255, 255, 255);
    position: relative;
    height: 100vh;
    width: 100%;
    padding: 2em;
}

.slide-wrapper {
    position: relative;
    margin: 0 auto;
    padding: 3em;
    width: 40%;
    height: 80%;
    border-radius: 20px;
    box-shadow: 0px 1px 2px 0px rgb(53, 53, 53);
    overflow: hidden;
}

/*==================
    Slides
===================*/

#slide-role {
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 100%;
    z-index: 100;
    transition: left .5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    /* flex */
    display: flex;
}

.slide {
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* backgrounds */

.slide-1 {
    background-image: url("https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg?auto=compress&cs=tinysrgb&h=650&w=940");
}

.slide-2 {
    background-image: url("https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=650&w=940");
}

.slide-3 {
    background-image: url("https://images.pexels.com/photos/448714/pexels-photo-448714.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");
}

.slide-4 {
    background-image: url("https://images.pexels.com/photos/38136/pexels-photo-38136.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");
}

/*===================
    BUTTONS
====================*/

.btn,
.btn::after {
    border-radius: 50%;
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.btn {
    border: 1px solid rgba(0, 0, 0, 0.281);
    background: rgb(255, 255, 255);
    box-shadow: 0px 2px 2px rgba(56, 56, 56, 0.822);
    position: absolute;
    bottom: 12%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transform: scale(1.1);
    z-index: 1000;
}

.btn:nth-of-type(1) {
    left: 38%;
}

.btn:nth-of-type(2) {
    left: 45%;
}

.btn:nth-of-type(3) {
    left: 52%;
}

.btn:nth-of-type(4) {
    left: 59%;
}

.btn:hover {
    transform: scale(1.4);
}

/* buttons Atom! */

.btn::after {
    content: "";
    display: inline-block;
    border: 1px solid white;
    background: rgb(11, 185, 238);
    width: 20px;
    height: 20px;
    margin: 3px 3px;
    transform: scale(.5, .5);
    box-shadow: 0px 1px 5px rgba(56, 56, 56, 0.822);
}

/*====================
        L O G I C 
 ===================*/

/* slide logic */

input[type="radio"]:checked#slide-2-trigger~div.slide-wrapper>div#slide-role {
    left: -100%;
}

input[type="radio"]:checked#slide-3-trigger~div.slide-wrapper>div#slide-role {
    left: -200%;
}

input[type="radio"]:checked#slide-4-trigger~div.slide-wrapper>div#slide-role {
    left: -300%;
}

/* button logic */

input[type="radio"]:checked+label.btn {
    transform: scale(1.2);
    border: 1px solid rgba(53, 53, 53, 0.308);
}

input[type="radio"]:checked+label.btn::after {
    transform: scale(1.1, 1.1);
    background: lightskyblue;
}

/*=====================================================================================
                MEDIA QUERIES
=======================================================================================*/

@media only screen and (max-width: 750px) {
    .slide-wrapper {
        width: 90%;
        height: 100%;
    }
    .btn:nth-of-type(1) {
        left: 93%;
        bottom: 60%;
    }
    .btn:nth-of-type(2) {
        left: 93%;
        bottom: 50%;
    }
    .btn:nth-of-type(3) {
        left: 93%;
        bottom: 40%;
    }
    .btn:nth-of-type(4) {
        left: 93%;
        bottom: 30%;
    }
}

@media only screen and (max-width: 450px) {
    .btn:nth-of-type(1) {
        left: 91%;
    }
    .btn:nth-of-type(2) {
        left: 91%;
    }
    .btn:nth-of-type(3) {
        left: 91%;
    }
    .btn:nth-of-type(4) {
        left: 91%;
    }
}
</style>
</head>
<body>
  <div class="container">

        <!-- BUTTONS (input/labels) -->
        <input type="radio" name="slider" id="slide-1-trigger" class="trigger" checked>
        <label class="btn" for="slide-1-trigger"></label>
        <input type="radio" name="slider" id="slide-2-trigger" class="trigger">
        <label class="btn" for="slide-2-trigger"></label>
        <input type="radio" name="slider" id="slide-3-trigger" class="trigger">
        <label class="btn" for="slide-3-trigger"></label>
        <input type="radio" name="slider" id="slide-4-trigger" class="trigger">
        <label class="btn" for="slide-4-trigger"></label>

        <!-- SLIDES -->
        <div class="slide-wrapper">
            <div id="slide-role">
                <div class="slide slide-1"></div>
                <div class="slide slide-2"></div>
                <div class="slide slide-3"></div>
                <div class="slide slide-4"></div>
            </div>
        </div>
    </div>
</body>
</html>

26. Responsive GTA V Slider

Made by Eduard Mayer. Source

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1em;
  margin: 0;
  padding: 0;
  line-height: 1;
  background: #111111;
}
.pen {
  max-width: 635px;
  width: 100%;
  margin: 50px auto 0;
  opacity: 0;
  position: relative;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-animation: 1s appear 1 forwards;
  -moz-animation: 1s appear 1 forwards;
  -o-animation: 1s appear 1 forwards;
  animation: 1s appear 1 forwards;
}
.credit {
  display: block;
  max-width: 400px;
  text-align: center;
  margin: 150px auto 0;
  padding: 0;
  font-size: 0.8em;
  color: #f0f0f0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.credit p a,
.credit a {
  color: white;
  text-decoration: none;
  font-weight: 700;
}
.credit p a:hover,
.credit a:hover,
.credit p a:active,
.credit a:active {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
  color: white;
}
.credit p a.button,
.credit a.button {
  padding: 6px 12px;
  margin-top: 10px;
  background: #000000;
  border-radius: 3px;
}
.credit p a.button:hover,
.credit a.button:hover {
  background: #2b2b2b;
}
.credit p:last-of-type {
  margin-bottom: 30px;
}
.stage {
  max-width: 635px;
  width: 100%;
  height: 400px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.element {
  background: green;
  width: 202px;
  -webkit-transform-origin: 50% 50%;
  height: inherit;
  margin: 0 7px 0 0;
  display: inline-block;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.element.active {
  width: 282px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.element.inactive {
  width: 162px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  opacity: 0.4;
}
.element.franklin {
  background: url('http://www.eduardmayer.de/codepen-css-resources/images/gta/franklin.jpeg') 45% 0 no-repeat;
  background-size: cover;
}
.element.michael {
  background: url('http://www.eduardmayer.de/codepen-css-resources/images/gta/michael.jpeg') 45% 0 no-repeat;
  background-size: cover;
}
.element.trevor {
  background: url('http://www.eduardmayer.de/codepen-css-resources/images/gta/trevor.jpeg') 45% 0 no-repeat;
  background-size: cover;
}
.element:last-of-type {
  margin: 0;
}
@media all and (min-width: 900px) {
  .pen {
    max-width: 890px;
  }
  .element {
    width: 286px;
  }
  .element.inactive {
    width: 246px;
  }
  .element.active {
    width: 366px;
  }
  .stage {
    max-width: 890px;
    height: 600px;
  }
}
@media all and (max-width: 660px) {
  .pen {
    max-width: 335px;
  }
  .element {
    width: 101px;
  }
  .element.inactive {
    width: 61px;
  }
  .element.active {
    width: 181px;
  }
  .stage {
    max-width: 335px;
  }
}
@-webkit-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
</head>
<body>
  <html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Responsive GTA V Slider</title>
	<meta author="Eduard Mayer">
</head>
<body>
	<section class="pen">
		<div class="stage">
			<div class="element michael"></div>
			<div class="element franklin"></div>
			<div class="element trevor"></div>
		</div>
	</section>
	<section class="credit">
		<p>Code by <a href="https://twitter.com/vsxed" target="_blank" class="credit-link">Eduard Mayer</a>, <a href="https://www.rockstargames.com/V/" target="_blank" class="credit-link">Original</a></p>
		<a href="https://github.com/vsxed/Responsive-GTA-V-Slider" target="_blank" class="credit-link button">Fork it on Github</a>
	</section>
</body>
</html>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
$('.element').each(function () {
  $(this).mouseover(function () {
    $(this).addClass('active');
    $('.stage').children('.element').not('.active').addClass('inactive');
  });
  $(this).mouseleave(function () {
    $(this).removeClass('active');
    $('.stage').children('.element').not('.active').removeClass('inactive');
  });
});
    </script>
</body>
</html>
 

27. Sliding Background Gallery

Made by Ron Gierlach. Sliding Background Gallery, the slides move from one circle to another. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
  
<style>
html, body {
  margin: 0;
  height: 100%;
  background: #F4F1E9;
}

.arrow {
  font-size: 2em;
  color: #363f85;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
}
.arrow#left-arrow {
  -webkit-transform: translate(-11em, -50%);
  -moz-transform: translate(-11em, -50%);
  -ms-transform: translate(-11em, -50%);
  -o-transform: translate(-11em, -50%);
  transform: translate(-11em, -50%);
}
.arrow#right-arrow {
  -webkit-transform: translate(10em, -50%);
  -moz-transform: translate(10em, -50%);
  -ms-transform: translate(10em, -50%);
  -o-transform: translate(10em, -50%);
  transform: translate(10em, -50%);
}
.arrow:hover {
  color: #B3B2AD;
}

.slider {
  position: relative;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 600px;
  height: 200px;
}

.slide {
  float: left;
  position: relative;
  width: 33.3333333333%;
  height: 100%;
  overflow-x: hidden;
  border-radius: 50%;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
.slide#slide-center {
  z-index: 1;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
}

.slide-holder {
  width: 300%;
  height: 100%;
  display: block;
  position: relative;
  top: 0;
  -webkit-transform: translateX(-33.3333333333%);
  -moz-transform: translateX(-33.3333333333%);
  -ms-transform: translateX(-33.3333333333%);
  -o-transform: translateX(-33.3333333333%);
  transform: translateX(-33.3333333333%);
}

.slide-bg {
  width: 33.3333333333%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  float: left;
  margin: 0;
}

#slide-left .bg-previous {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/72/Peter_Paul_Rubens_(taller)_-_Rapto_de_las_Sabinas.jpg");
}
#slide-left .bg-current {
  background-image: url("http://images.metmuseum.org/CRDImages/ep/original/46_160.jpg");
}
#slide-left .bg-next {
  background-image: url("http://uploads6.wikiart.org/images/pablo-picasso/the-abduction-of-sabines-1962-1.jpg");
}

#slide-center .bg-previous {
  background-image: url("http://images.metmuseum.org/CRDImages/ep/original/46_160.jpg");
}
#slide-center .bg-current {
  background-image: url("http://uploads6.wikiart.org/images/pablo-picasso/the-abduction-of-sabines-1962-1.jpg");
}
#slide-center .bg-next {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/72/Peter_Paul_Rubens_(taller)_-_Rapto_de_las_Sabinas.jpg");
}

#slide-right .bg-previous {
  background-image: url("http://uploads6.wikiart.org/images/pablo-picasso/the-abduction-of-sabines-1962-1.jpg");
}
#slide-right .bg-current {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/72/Peter_Paul_Rubens_(taller)_-_Rapto_de_las_Sabinas.jpg");
}
#slide-right .bg-next {
  background-image: url("http://images.metmuseum.org/CRDImages/ep/original/46_160.jpg");
}
</style>
</head>
<body>
  <div class="slider" id="slider">
  <div class="slide" id="slide-left">
    <div class="slide-holder">
      <div class="slide-bg bg-previous"></div>
      <div class="slide-bg bg-current"></div>
      <div class="slide-bg bg-next"></div>
    </div>
  </div>
  <div class="slide" id="slide-center">
    <div class="slide-holder">
      <div class="slide-bg bg-previous"></div>
      <div class="slide-bg bg-current"></div>
      <div class="slide-bg bg-next"></div>
    </div>
  </div>
  <div class="slide" id="slide-right">
    <div class="slide-holder">
      <div class="slide-bg bg-previous"></div>
      <div class="slide-bg bg-current"></div>
      <div class="slide-bg bg-next"></div>
    </div>
  </div>
</div><a class="arrow" href="#" id="left-arrow"><i class="fa fa-arrow-circle-o-left"></i></a><a class="arrow" href="#" id="right-arrow"><i class="fa fa-arrow-circle-o-right"></i></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js'></script>
      <script id="rendered-js" >
(function() {
  // Inspiration:
  // http://coolcarousels.frebsite.nl/c/59/
  // & 
  // https://css-tricks.com/slider-with-sliding-backgrounds/
  var $left_arrow, $right_arrow, animate_next, animate_previous;

  $right_arrow = $('#right-arrow');

  $left_arrow = $('#left-arrow');

  $right_arrow.click(function(e) {
    e.preventDefault();
    $('.slide-holder').velocity('finish'); // finish any current animations
    animate_next('#slide-right');
    animate_next('#slide-center', 175);
    return animate_next('#slide-left', 350);
  });

  $left_arrow.click(function(e) {
    e.preventDefault();
    $('.slide-holder').velocity('finish'); // finish any current animations
    animate_previous('#slide-left');
    animate_previous('#slide-center', 175);
    return animate_previous('#slide-right', 350);
  });

  animate_next = function(selector, delay = 0, cb = null) {
    return setTimeout(function() {
      var $bg_curr, $bg_next, $bg_prev, $el;
      $el = $(`${selector} .slide-holder`);
      $bg_prev = $el.find('.bg-previous');
      $bg_curr = $el.find('.bg-current');
      $bg_next = $el.find('.bg-next');
      $.Velocity.hook($el, "translateX", `-${100 / 3}%`);
      return $.Velocity.animate($el, { // animate the transform
        translateX: `-${200 / 3}%`,
        duration: 350
      }).then(function(elms) { // reorder the slide-bg's and recenter the slide-holder
        var next_bg_image;
        next_bg_image = $.Velocity.hook($bg_prev, "background-image");
        $.Velocity.hook($bg_prev, "background-image", $.Velocity.hook($bg_curr, "background-image"));
        $.Velocity.hook($bg_curr, "background-image", $.Velocity.hook($bg_next, "background-image"));
        $.Velocity.hook($el, "translateX", `-${100 / 3}%`);
        $.Velocity.hook($bg_next, "background-image", next_bg_image);
        if (typeof cb === 'function') {
          return cb(elms);
        }
      });
    }, delay);
  };

  animate_previous = function(selector, delay, cb) {
    return setTimeout(function() {
      var $bg_curr, $bg_next, $bg_prev, $el;
      $el = $(`${selector} .slide-holder`);
      $bg_prev = $el.find('.bg-previous');
      $bg_curr = $el.find('.bg-current');
      $bg_next = $el.find('.bg-next');
      $.Velocity.hook($el, "translateX", `-${100 / 3}%`);
      return $.Velocity.animate($el, { // animate the transform
        translateX: "0",
        duration: 350
      }).then(function(elms) { // reorder the slide-bg's and recenter the slide-holder
        var prev_bg_image;
        prev_bg_image = $.Velocity.hook($bg_next, "background-image");
        $.Velocity.hook($bg_next, "background-image", $.Velocity.hook($bg_curr, "background-image"));
        $.Velocity.hook($bg_curr, "background-image", $.Velocity.hook($bg_prev, "background-image"));
        $.Velocity.hook($el, "translateX", `-${100 / 3}%`);
        $.Velocity.hook($bg_prev, "background-image", prev_bg_image);
        if (typeof cb === 'function') {
          return cb(elms);
        }
      });
    }, delay);
  };

}).call(this);
    </script>
</body>
</html>

28. Popout Slider

Made by Nathan Taylor. Slide and Popup CSS Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  background: #aaa;
  font-family: "Open Sans", sans-serif;
}

.slider {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #777;
  overflow: hidden;
}
.slider__wrap {
  position: absolute;
  width: 100vw;
  height: 100vh;
  transform: translateX(100vw);
  top: 0%;
  left: 0;
  right: auto;
  overflow: hidden;
  transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transform-origin: 0% 50%;
  transition-delay: 450ms;
  opacity: 0;
}
.slider__wrap--hacked {
  opacity: 1;
}
.slider__back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-position: center;
  background-repeat: none;
  transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0%;
  background-size: auto 133.3333%;
  background-position: center;
  background-repeat: none;
  transform: scale(0.75);
  transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
  opacity: 0;
  box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
  padding: 15vh;
  box-sizing: border-box;
}
.slider__content {
  position: relative;
  top: 50%;
  width: auto;
  transform: translateY(-50%);
  color: white;
  font-family: "Heebo", sans-serif;
  opacity: 0;
  transition: opacity 450ms;
}
.slider__content h1 {
  font-weight: 900;
  font-size: 9vh;
  line-height: 0.85;
  margin-bottom: 0.75vh;
  pointer-events: none;
  text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
  cursor: pointer;
  font-size: 2.4vh;
  letter-spacing: 0.3vh;
  font-weight: 100;
  position: relative;
}
.slider__content a:after {
  content: "";
  display: block;
  width: 9vh;
  background: white;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 6vh;
  transform: translateY(-50%);
  transform-origin: 0% 50%;
  transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
  content: "";
  border-top: 1px solid white;
  border-right: 1px solid white;
  display: block;
  width: 1vh;
  height: 1vh;
  transform: translateX(0) translateY(-50%) rotate(45deg);
  position: absolute;
  font-family: "Heebo", sans-serif;
  font-weight: 100;
  top: 50%;
  left: 15vh;
  transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
  transform: scaleX(1.5);
  transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
  transform: translateX(6vh) translateY(-50%) rotate(45deg);
  transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
  position: absolute;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-delay: 600ms;
  pointer-events: none;
  z-index: 0;
}
.slider__slide--active {
  transform: translatex(0%);
  z-index: 2;
}
.slider__slide--active .slider__wrap {
  transform: translateX(0);
  transform-origin: 100% 50%;
  opacity: 1;
  -webkit-animation: none;
          animation: none;
}
.slider__slide--active .slider__back {
  filter: blur(1.5vh);
  transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
  transform: scale(0.8);
  box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  opacity: 1;
  transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
  transition-delay: 900ms;
}
.slider__slide--active .slider__content {
  opacity: 1;
  transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
  -webkit-animation-name: hack;
          animation-name: hack;
  -webkit-animation-duration: 900ms;
          animation-duration: 900ms;
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
  -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
          animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@-webkit-keyframes hack {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-100vw);
    opacity: 1;
  }
  51% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  52% {
    transform: translateX(100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(100vw);
    opacity: 1;
  }
}
@keyframes hack {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-100vw);
    opacity: 1;
  }
  51% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  52% {
    transform: translateX(100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(100vw);
    opacity: 1;
  }
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
  background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
  background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
  background-image: url(https://unsplash.it/1600/800/?image=927);
}

.sig {
  position: fixed;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
  z-index: 9999;
}
</style>
</head>
<body>
  <div class="slider">
  <div class="slider__slide slider__slide--active" data-slide="1">
    <div class="slider__wrap">
      <div class="slider__back"></div>
    </div>
    <div class="slider__inner">
      <div class="slider__content">
        <h1>Slide <br> One</h1><a class="go-to-next">next</a>
      </div>
    </div>
  </div>
  <div class="slider__slide" data-slide="2">
    <div class="slider__wrap">
      <div class="slider__back"></div>
    </div>
    <div class="slider__inner">
      <div class="slider__content">
        <h1>Slide <br> Two</h1><a class="go-to-next">next</a>
      </div>
    </div>
  </div>
  <div class="slider__slide" data-slide="3">
    <div class="slider__wrap">
      <div class="slider__back"></div>
    </div>
    <div class="slider__inner">
      <div class="slider__content">
        <h1>Slide <br> Three</h1><a class="go-to-next">next</a>
      </div>
    </div>
  </div>
  <div class="slider__indicators"></div>
</div><a class="sig" href="http://nathan.tokyo" target="_blank">NATHAN.TOKYO</a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script id="rendered-js" >
$(document).ready(function () {
  for (var i = 1; i <= $('.slider__slide').length; i++) {if (window.CP.shouldStopExecution(0)) break;
    $('.slider__indicators').append('<div class="slider__indicator" data-slide="' + i + '"></div>');
  }window.CP.exitedLoop(0);
  setTimeout(function () {
    $('.slider__wrap').addClass('slider__wrap--hacked');
  }, 1000);
});

function goToSlide(number) {
  $('.slider__slide').removeClass('slider__slide--active');
  $('.slider__slide[data-slide=' + number + ']').addClass('slider__slide--active');
}

$('.slider__next, .go-to-next').on('click', function () {
  var currentSlide = Number($('.slider__slide--active').data('slide'));
  var totalSlides = $('.slider__slide').length;
  currentSlide++;
  if (currentSlide > totalSlides) {
    currentSlide = 1;
  }
  goToSlide(currentSlide);
});
    </script>
</body>
</html>

29. Emoji Slider

Made by Alexander Klimov. A simple Emoji Slider. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>    
      <div>
      <input type="button" value="&lt;" id="prev">          
      <p>😜</p>
      <input type="button" value="&gt;" id="next"></div> 
      <style>
p {
 font-size: 150px;  
 text-align: center; 
 display: inline-block;
 padding: 20px;
}
input {
    font-size: 50px;
    border-radius: 50%;
}
          </style>
          <script>
window.onload = function() {
    var p = document.getElementsByTagName("p");
    var img = ["😜", "😍", "πŸ€‘"];    
    var prev = document.getElementById("prev");
       var next = document.getElementById("next");
    var x = 0;
    next.onclick = function() {  
    x++;       
    if(x == img.length) 
    x = 0;  
    p[0].textContent = img[x];   
    }
     prev.onclick = function() {  
     x--;       
    if(x < 0) 
    x = img.length - 1;     
    p[0].textContent = img[x];     
    }
};
              </script>
    </body>
</html>

30. Gray & White Skewed Slider with Scrolling

Made by Victor Belozyorov. CSS Slider that changes slides when you scroll using your mouse. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
/***********************
 *	Variables
 **********************/
/***********************
 *	Project Main Styles
 **********************/
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: #282828;
}

.slider-pages {
  overflow: hidden;
  position: relative;
  height: 100vh;
}

.slider-page {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100vh;
  transition: transform 1350ms;
}

.slider-page--skew {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 140%;
  height: 100%;
  background: #282828;
  transform: skewX(-18deg);
}

.slider-page--left {
  left: 0;
  transform: translateX(-32.5vh) translateY(100%) translateZ(0);
}
.slider-page--left .slider-page--skew {
  left: -40%;
}
.slider-page--left .slider-page__content {
  padding: auto 30% auto 30%;
  transform-origin: 100% 0;
}

.slider-page--right {
  left: 50%;
  transform: translateX(32.5vh) translateY(-100%) translateZ(0);
}
.slider-page--right .slider-page--skew {
  right: -40%;
}
.slider-page--right .slider-page__content {
  padding: auto 30% auto 30%;
  transform-origin: 0 100%;
}

.slider-page__content {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 30% 0 30%;
  color: #e2e2e2;
  background-size: cover;
  transform: skewX(18deg);
  transition: transform 1350ms;
}

.slider-page__title {
  margin-bottom: 1em;
  font-size: 1em;
  text-align: center;
  text-transform: uppercase;
}

.slider-page__title--big {
  font-size: 1.2em;
}

.slider-page__description {
  font-size: 1em;
  text-align: center;
}

.slider-page__link {
  color: #80a1c1;
}
.slider-page__link:hover, .slider-page__link:focus {
  color: #6386a9;
  text-decoration: none;
}

/***********************
 *	Project JS Styles
 **********************/
.js-scrolling__page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.js-scrolling--active .slider-page {
  transform: translateX(0) translateY(0) translateZ(0);
}

.js-scrolling--inactive .slider-page__content {
  transform: skewX(18deg) scale(0.9);
}

.js-scrolling__page-1 .slider-page--left .slider-page__content {
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a6/6a/a3/a66aa3134eb9f439838e676297a75bd6.jpg");
}
.js-scrolling__page-1 .slider-page--right .slider-page__content {
  background-color: #282828;
}

.js-scrolling__page-2 .slider-page--left .slider-page__content {
  background-color: #e2e2e2;
}
.js-scrolling__page-2 .slider-page--left .slider-page__title,
.js-scrolling__page-2 .slider-page--left .slider-page__description {
  color: #282828;
}
.js-scrolling__page-2 .slider-page--right .slider-page__content {
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/7a/8d/51/7a8d51f4968960334274ac7959d31a7d.jpg");
}

.js-scrolling__page-3 .slider-page--left .slider-page__content {
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/4c/d8/7b/4cd87bc93cca92f76285c061cef16585.jpg");
}
.js-scrolling__page-3 .slider-page--right .slider-page__content {
  background-color: #282828;
}
</style>
</head>

<body translate="no" >
  <section class="slider-pages">

  <article class="js-scrolling__page js-scrolling__page-1 js-scrolling--active">
    <div class="slider-page slider-page--left">
      <div class="slider-page--skew">
        <div class="slider-page__content">
        </div>
        <!-- /.slider-page__content -->
      </div>
      <!-- /.slider-page--skew -->
    </div>
    <!-- /.slider-page slider-page--left -->

    <div class="slider-page slider-page--right">
      <div class="slider-page--skew">
        <div class="slider-page__content">
          <h1 class="slider-page__title slider-page__title--big">
            Gray & White - Skewed Slider with Scrolling
          </h1>
          <!-- /.slider-page__title slider-page__title--big -->
          <h2 class="slider-page__title">
            Start of your story
          </h2>
          <!-- /.slider-page__title -->
          <p class="slider-page__description">
            Please scroll down or press the down arrow on your keyboard
          </p>
          <!-- /.slider-page__description -->
        </div>
        <!-- /.slider-page__content -->
      </div>
      <!-- /.slider-page--skew -->
    </div>
    <!-- /.slider-page slider-page--right -->
  </article>
  <!-- /.js-scrolling__page js-scrolling__page-1 js-scrolling--active -->


  <article class="js-scrolling__page js-scrolling__page-2">
    <div class="slider-page slider-page--left">
      <div class="slider-page--skew">
        <div class="slider-page__content">
          <h1 class="slider-page__title">
            Now you are here
          </h1>
          <!-- /.slider-page__title -->
          <p class="slider-page__description">
            Please continue scrolling
          </p>
          <!-- /.slider-page__description -->
        </div>
        <!-- /.slider-page__content -->
      </div>
      <!-- /.slider-page--skew -->
    </div>
    <!-- /.slider-page slider-page--left -->

    <div class="slider-page slider-page--right">
      <div class="slider-page--skew">
        <div class="slider-page__content">
        </div>
        <!-- /.slider-page__content -->
      </div>
      <!-- /.slider-page--skew -->
    </div>
    <!-- /.slider-page slider-page--right -->
  </article>
  <!-- /.js-scrolling__page js-scrolling__page-2 -->


  <article class="js-scrolling__page js-scrolling__page-3">
    <div class="slider-page slider-page--left">
      <div class="slider-page--skew">
        <div class="slider-page__content">
        </div>
        <!-- /.slider-page__content -->
      </div>
      <!-- /.slider-page--skew -->
    </div>
    <!-- /.slider-page slider-page--left -->

    <div class="slider-page slider-page--right">
      <div class="slider-page--skew">
        <div class="slider-page__content">
          <h1 class="slider-page__title">
            Final is just the beginning
          </h1>
          <!-- /.slider-page__title -->
          <p class="slider-page__description">
            Feel free to follow me on <a class="slider-page__link" href="https://twitter.com/WispProxy"
                                         target="_blank">Twitter</a>
            and check of <a class="slider-page__link" href="https://codepen.io/WispProxy/pens/public"
                            target="_blank">my other works</a>
          </p>
          <!-- /.slider-page__description -->
        </div>
        <!-- /.slider-page__content -->
      </div>
      <!-- /.slider-page--skew -->
    </div>
    <!-- /.slider-page slider-page--right -->
  </article>
  <!-- /.js-scrolling__page js-scrolling__page-3 -->

</section>
<!-- /.slider-pages -->
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script id="rendered-js" >
/*********************
 *	Helpers Code
 ********************/
/**
 *  @function   DOMReady
 *
 *  @param callback
 *  @param element
 *  @param listener
 *  @returns {*}
 *  @constructor
 */
const DOMReady = (
callback = () => {},
element = document,
listener = 'addEventListener') =>
{
  return element[listener] ? element[listener]('DOMContentLoaded', callback) : window.attachEvent('onload', callback);
};

/**
 *  @function   ProjectAPI
 *
 *  @type {{hasClass, addClass, removeClass}}
 */
const ProjectAPI = (() => {
  let hasClass,
  addClass,
  removeClass;

  hasClass = (el, className) => {
    if (el === null) {
      return;
    }

    if (el.classList) {
      return el.classList.contains(className);
    } else
    {
      return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
    }
  };

  addClass = (el, className) => {
    if (el === null) {
      return;
    }

    if (el.classList) {
      el.classList.add(className);
    } else
    if (!hasClass(el, className)) {
      el.className += ' ' + className;
    }
  };

  removeClass = (el, className) => {
    if (el === null) {
      return;
    }

    if (el.classList) {
      el.classList.remove(className);
    } else
    if (hasClass(el, className)) {
      let reg = new RegExp('(\\s|^)' + className + '(\\s|$)');

      el.className = el.className.replace(reg, ' ');
    }
  };

  return {
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass };

})();


/*********************
 *	Application Code
 ********************/
/**
 *  @function   readyFunction
 *
 *  @type {Function}
 */
const readyFunction = () => {

  const KEY_UP = 38;
  const KEY_DOWN = 40;

  let scrollingClass = 'js-scrolling',
  scrollingActiveClass = scrollingClass + '--active',
  scrollingInactiveClass = scrollingClass + '--inactive',

  scrollingTime = 1350,
  scrollingIsActive = false,

  currentPage = 1,
  countOfPages = document.querySelectorAll('.' + scrollingClass + '__page').length,

  prefixPage = '.' + scrollingClass + '__page-',

  _switchPages,
  _scrollingUp,
  _scrollingDown,

  _mouseWheelEvent,
  _keyDownEvent,

  init;

  /**
   *  @function _switchPages
   *
   *  @private
   */
  _switchPages = () => {

    let _getPageDomEl;

    /**
      *  @function _getPageDomEl
      *
      *  @param page
      *  @returns {Element}
      *  @private
     */
    _getPageDomEl = (page = currentPage) => {
      return document.querySelector(prefixPage + page);
    };

    scrollingIsActive = true;


    ProjectAPI.removeClass(
    _getPageDomEl(),
    scrollingInactiveClass);

    ProjectAPI.addClass(
    _getPageDomEl(),
    scrollingActiveClass);


    ProjectAPI.addClass(
    _getPageDomEl(currentPage - 1),
    scrollingInactiveClass);


    ProjectAPI.removeClass(
    _getPageDomEl(currentPage + 1),
    scrollingActiveClass);



    setTimeout(
    () => {
      return scrollingIsActive = false;
    },
    scrollingTime);

  };
  /**
    *  @function _scrollingUp
    *
    *  @private
    */
  _scrollingUp = () => {
    if (currentPage === 1) {
      return;
    }

    currentPage--;

    _switchPages();
  };
  /**
    *  @function _scrollingDown
    *
    *  @private
    */
  _scrollingDown = () => {
    if (currentPage === countOfPages) {
      return;
    }

    currentPage++;

    _switchPages();
  };
  /**
    *  @function _mouseWheelEvent
    *
    *  @param e
    *  @private
    */
  _mouseWheelEvent = e => {
    if (scrollingIsActive) {
      return;
    }

    if (e.wheelDelta > 0 || e.detail < 0) {
      _scrollingUp();
    } else
    if (e.wheelDelta < 0 || e.detail > 0) {
      _scrollingDown();
    }
  };
  /**
    *  @function _keyDownEvent
    *
    *  @param e
    *  @private
    */
  _keyDownEvent = e => {
    if (scrollingIsActive) {
      return;
    }

    let keyCode = e.keyCode || e.which;

    if (keyCode === KEY_UP) {
      _scrollingUp();
    } else
    if (keyCode === KEY_DOWN) {
      _scrollingDown();
    }
  };

  /**
   *  @function init
   *
   *  @note     auto-launch
   */
  init = (() => {
    document.addEventListener(
    'mousewheel',
    _mouseWheelEvent,
    false);

    document.addEventListener(
    'DOMMouseScroll',
    _mouseWheelEvent,
    false);


    document.addEventListener(
    'keydown',
    _keyDownEvent,
    false);

  })();

};


/**
 *  Launcher
 */
DOMReady(readyFunction);
    </script>
</body>
</html>

31. Pure CSS scroll-snap carousel

Made by Jenning. Pure CSS scroll-snap carousel, You can control the slides using your arrow keys. Source

<!DOCTYPE html>
<html lang='en' class=''>

<head>

  <meta charset='UTF-8'>
  <title>CodePen Demo</title>

  <meta name="robots" content="noindex">

  <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
  <link rel="canonical" href="https://codepen.io/jenning/pen/jOVvRmz">

  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Josefin+Sans:[email protected]&display=swap" rel="stylesheet">
  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <style class="INLINE_PEN_STYLESHEET_ID">
    .carousel {
  margin: auto;
  width: 50rem;
  max-width: calc(100% - 6rem);
  position: relative;
  border: 2px solid #E6E8E6;
  position: relative;
  z-index: 1;
}
.carousel-num {
  position: absolute;
  font-size: 10px;
  color: #191919;
  text-shadow: 1px 1px #F15025;
  width: 100%;
  bottom: 4px;
  left: 0;
  line-height: 2rem;
  display: flex;
  z-index: 1;
  opacity: 0.6;
}
.carousel-num i {
  flex: 1;
  text-align: center;
}
.carousel-title {
  font-family: "Josefin Sans", sans-serif;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 100%;
  text-align: center;
  color: #E6E8E6;
  text-shadow: 1px 1px #191919;
}
.carousel-hint {
  font-family: "DotGothic16", sans-serif;
  width: 100%;
  position: absolute;
  font-size: 12px;
  line-height: 2rem;
  color: #E6E8E6;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: blink 1s ease infinite;
          animation: blink 1s ease infinite;
  text-shadow: 1px 1px #191919;
}
.carousel-hint i {
  width: 1rem;
  height: 1rem;
  border: 1px solid #F15025;
  border-radius: 2px;
  display: grid;
  place-items: center;
  margin: 0 8px;
}
.carousel-stage {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  overflow-x: scroll;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
}
.carousel-stage::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.carousel-stage::-webkit-scrollbar-track {
  background-color: #E6E8E6;
}
.carousel-stage::-webkit-scrollbar-thumb {
  background-color: #F15025;
  border-radius: 4px;
}
.carousel-item {
  height: 100%;
  flex: 1 0 100%;
  scroll-snap-align: start;
}
.carousel-item:nth-child(odd) {
  background: red;
}
.carousel-content {
  width: 100%;
  height: 100%;
  filter: sepia(0.2) brightness(1.15) saturate(1.4);
}
.carousel-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #191919;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-image: linear-gradient(45deg, transparent 48%, #E6E8E6 48%, #E6E8E6 52%, transparent 52%);
  background-size: 10px 10px;
}

@-webkit-keyframes blink {
  0%, 100%, 20%, 70% {
    opacity: 1;
  }
  45% {
    opacity: 0.3;
  }
}

@keyframes blink {
  0%, 100%, 20%, 70% {
    opacity: 1;
  }
  45% {
    opacity: 0.3;
  }
}
  </style>

  
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-7549a40147ccd0ba0a6b5373d87e770e49bb4689f1c2dc30cccc7463f207f997.js"></script>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script>
</head>

<body>
  
<div class="carousel">
  <div class="carousel-title">my CAT carousel</div>
  <div class="carousel-hint">Use arrow keys <i class="fas fa-angle-left"></i> or <i class="fas fa-angle-right"></i> to scroll.</div>
  <div class="carousel-num"><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i></div>
  <div class="carousel-stage" id="carousel">
    <div class="carousel-item">
      <div class="carousel-content"><img class="carousel-image" src="https://cdn2.thecatapi.com/images/2k6.jpg" alt="cat"/></div>
    </div>
    <div class="carousel-item">
      <div class="carousel-content"><img class="carousel-image" src="https://cdn2.thecatapi.com/images/ck2.jpg" alt="cat"/></div>
    </div>
    <div class="carousel-item">
      <div class="carousel-content"><img class="carousel-image" src="https://cdn2.thecatapi.com/images/ckc.jpg" alt="cat"/></div>
    </div>
    <div class="carousel-item">
      <div class="carousel-content"><img class="carousel-image" src="https://cdn2.thecatapi.com/images/779.jpg" alt="cat"/></div>
    </div>
    <div class="carousel-item">
      <div class="carousel-content"><img class="carousel-image" src="https://cdn2.thecatapi.com/images/dp8.jpg" alt="cat"/></div>
    </div>
  </div>
</div>
  
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script  src="https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-86f85c09-919b-5961-e982-c9d15d457f0c" crossorigin></script>
</body>

</html>