.slider-ctr

  figure.slide
    img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/img5.jpeg", alt="Sky")
    figcaption 
      .title Sky
      .author Aleksandra
  
  figure.slide
    img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/img1.jpeg", alt="River")
    figcaption 
      .title River
      .author Ales Krivec

  figure.slide
    img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/img4.jpeg", alt="Rain")
    figcaption
      .title Rain
      .author Wilson Lau
      
  figure.slide.text-on
    img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/img2.jpeg", alt="Ocean")
    figcaption
      .title Ocean
      .author Rosan Harmens
      
  .slider-control
    .control.prev.disabled
      .icon.ion-chevron-left
    .control.next
      .icon.ion-chevron-right
View Compiled
@import "bourbon";
@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;
  @include position(absolute, 50% x x 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,.15), 0 5px 20px 3px rgba(0,0,0,.1);
  
  &:after {
    content: "";
    @include position(absolute, 0 0 0 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 {
  @include position(absolute, x 30px 30px x);
  width: 80px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 3px 3px 3px rgba(0,0,0,.15);
  z-index: 99;
  
  .control {
    width: 50%;
    height: 40px;
    display: block;
    float: left;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    transition: .3s all ease;
    background: white;
    
    .icon {
      pointer-events: none;
      transition: .3s all ease;
    }
    
    &.disabled {
      pointer-events: none;
      background: #ddd;
      
      .icon {
        opacity: .5;
      }
    }
  }
}

.slide {
  @include position(absolute, 0 0 0 0);
  transition: .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);
  
  &:before {
    content: "";
    @include position(absolute, 0 0 0 0);
    background: rgba(0,0,0,.125);
  }
  
  // slide-on animation
  &.slide-on {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  
  &.text-on .title {
    transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .45s;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
  
  &.text-on .author {
    transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .6s;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
  
  img {
    display: block;
  }
  
  figcaption {
    @include position(absolute, 30px x x 30px);
  }
  
  .title {
    font-size: 50px;
    margin-bottom: 2px;
    color: white;
    transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .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;
  }
  
  .author {
    font-size: 16px;
    color: white;
    opacity: .8;
    transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1) .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;
  }
}
// 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");

External CSS

  1. https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css

External JavaScript

  1. https://codepen.io/balapa/pen/c58fffe58d661ae3d4b168a43eb3b2b8.js