CodePen Embed - Simple Image Slider

div.slideshow
  .slideshow__contentWrap
    h2.slideshow__title True Detective
    p.slideshow__text True Detective is an American crime drama television series created and written by Nix Pizzolatto. The series is broadcast by the premium cable network HBO in the United States.
  
  ul.slideshow__container
    li.slideshow__item     
     img.slideshow__image(src='http://images.alphacoders.com/483/483700.jpg')
    li.slideshow__item
     img.slideshow__image(src='https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg')      
    li.slideshow__item
     img.slideshow__image(src='https://i.ytimg.com/vi/L3PZkY5leFs/maxresdefault.jpg')
    li.slideshow__item
     img.slideshow__image(src='https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg')
   
  .slideshow__back
    .slideshow__slidein
      .overlay
      img.slideshow__image(src='https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg')
      h2.slideTitle PREVIOUS SLIDE  
    .slideshow__block
      img.close(src='data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNjEyLjA0MyA2MTIuMDQzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIuMDQzIDYxMi4wNDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY3Jvc3MiPgoJCTxnPgoJCQk8cGF0aCBkPSJNMzk3LjUwMywzMDYuMDExbDE5NS41NzctMTk1LjU3N2MyNS4yNy0yNS4yNjksMjUuMjctNjYuMjEzLDAtOTEuNDgyYy0yNS4yNjktMjUuMjY5LTY2LjIxMy0yNS4yNjktOTEuNDgxLDAgICAgIEwzMDYuMDIyLDIxNC41NTFMMTEwLjQ0NSwxOC45NzRjLTI1LjI2OS0yNS4yNjktNjYuMjEzLTI1LjI2OS05MS40ODIsMHMtMjUuMjY5LDY2LjIxMywwLDkxLjQ4MkwyMTQuNTQsMzA2LjAzM0wxOC45NjMsNTAxLjYxICAgICBjLTI1LjI2OSwyNS4yNjktMjUuMjY5LDY2LjIxMywwLDkxLjQ4MWMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MiwwbDE5NS41NzctMTk1LjU3NmwxOTUuNTc3LDE5NS41NzYgICAgIGMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MSwwYzI1LjI3LTI1LjI2OSwyNS4yNy02Ni4yMTMsMC05MS40ODFMMzk3LjUwMywzMDYuMDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K')
    .slideshow__prev.
      <svg width="32px" height="32px" viewBox="1 -1 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
              <g id="prevBtn" sketch:type="MSArtboardGroup" stroke="#1B2023" stroke-width="2">
                  <g id="Btn" sketch:type="MSLayerGroup" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) ">
                      <path d="M16,1 L25.6,16.5428571 L16,31" class="line" stroke-linecap="round" sketch:type="MSShapeGroup"></path>
                      <circle class="circle" sketch:type="MSShapeGroup" cx="15" cy="15" r="15"></circle>
                  </g>
              </g>
          </g>
      </svg>
    
  .slideshow__forward
    .slideshow__slidein
      .overlay
      img.slideshow__image(src='https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg')   
      h2.slideTitle NEXT SLIDE
    .slideshow__block
      img.close(src='data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNjEyLjA0MyA2MTIuMDQzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIuMDQzIDYxMi4wNDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY3Jvc3MiPgoJCTxnPgoJCQk8cGF0aCBkPSJNMzk3LjUwMywzMDYuMDExbDE5NS41NzctMTk1LjU3N2MyNS4yNy0yNS4yNjksMjUuMjctNjYuMjEzLDAtOTEuNDgyYy0yNS4yNjktMjUuMjY5LTY2LjIxMy0yNS4yNjktOTEuNDgxLDAgICAgIEwzMDYuMDIyLDIxNC41NTFMMTEwLjQ0NSwxOC45NzRjLTI1LjI2OS0yNS4yNjktNjYuMjEzLTI1LjI2OS05MS40ODIsMHMtMjUuMjY5LDY2LjIxMywwLDkxLjQ4MkwyMTQuNTQsMzA2LjAzM0wxOC45NjMsNTAxLjYxICAgICBjLTI1LjI2OSwyNS4yNjktMjUuMjY5LDY2LjIxMywwLDkxLjQ4MWMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MiwwbDE5NS41NzctMTk1LjU3NmwxOTUuNTc3LDE5NS41NzYgICAgIGMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MSwwYzI1LjI3LTI1LjI2OSwyNS4yNy02Ni4yMTMsMC05MS40ODFMMzk3LjUwMywzMDYuMDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K')
    .slideshow__next.
      <svg width="32px" height="32px" viewBox="-1 -1 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
              <g class="Btn" sketch:type="MSLayerGroup" stroke="#1B2023" stroke-width="2">
                  <path class="line" d="M16,1 L25.6,16.5428571 L16,31" class="line" stroke-linecap="round" sketch:type="MSShapeGroup"></path>
                  <circle class="circle" sketch:type="MSShapeGroup" cx="15" cy="15" r="15"></circle>
              </g>
          </g>
      </svg>

View Compiled

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #fff;
  font-family: "Perpetua", serif;
}

.slideshow {
  
  & {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  }
  
  &__contentWrap {
    width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
  }
  
  &__title {
    font-size: 4em;
    margin: 0;
    font-weight: 100;
  }
  
  &__text {
    font-size: 1em;
    line-height: 1.5;
    font-weight: 100;
    font-family: "Century Gothic", sans-serif;
  }
  
  &__container {
    display:block;
    list-style:none;
    position:relative;
    white-space:nowrap;
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    font-size: 0;
  }
  
  &__item {
    display:inline-block;
    position:relative;
    width:100%;
    height:100%;
  }
  
  &__image {
    display:block;
    position:relative;
    height:auto;
    width:100%;
    background-size:contain;
  }
  

  &__slidein {
    height: 100px;
    width: 350px;
    display: block;
    position: absolute;
    background-color:#000;
    top: 50%;
    transform: translateY(-50%);
    margin:0;
    overflow:hidden;
    
    img {
      display:block;
      position:absolute;
      top:50%;
      transform:translateY(-50%);
    }
  }
  
  .overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: #000;
  opacity:0.5;
  }

&__forward {
    .slideshow__slidein {
     right:-350px;
      z-index:2;
      .slideTitle {
        font-size: 1.5em;
        color: #fff;
        font-family: "Century Gothic", sans-serif;
        font-weight:100;
        margin:0;
        padding-left:1em;
         position: relative;
        top: 50%;
        transform: translateY(-50%);
        z-index:11;
        margin-right:300px;
        text-align:right;
      }
    }
    .slideshow__block {
      position:absolute;
      display:block;
      top:50%;
      transform:translateY(-50%);
      height: 100px;
      width: 80px;
      right:270px;
      opacity:0;
      background-color: #fff;
      z-index:2;
  }
  }
&__back {
    .slideshow__slidein {
     left:-350px;
     z-index:2; 
       .slideTitle {
        font-size: 1.5em;
        color: #fff;
        font-family: "Century Gothic", sans-serif;
        font-weight:100;
        margin:0;
        padding-right:1em;
        float:right;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        z-index:11;
        margin-left:300px;
        text-align:right;
        
      }
    }
  .slideshow__block {
      position:absolute;
      display:block;
      top:50%;
      transform:translateY(-50%);
      height: 100px;
      width: 80px;
      left:270px;
      opacity:0;
      background-color: #fff;
      z-index:2;
  }
  }
  
  .close {
    width:25px;
    height:25px;
    position:relative;
    display:block;
    opacity:0;
    transition: opacity .25s ease-in-out;
    top:50%;
    transform:translateY(-50%);
    margin-left:auto;
    margin-right:auto;
  }
  
  .slideshow__block:hover {
    .close{
      opacity:1;
    }
  }
  
  &__prev,
  &__next {
    width: 3em;
    z-index:1;
    
    svg {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  
  &__prev {
    position:absolute;
    left:5em;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    z-index:1;
    
    .circle{
      opacity:0;
    }
  }
  
  &__next {
    position:absolute;
    right:5em;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    z-index:1;
    .circle {
      opacity:0;
    }
  }
}

View Compiled

$(document).ready(function() {
  var imgWidth = $(".slideshow__image").width(),
    $slider = $(".slideshow__container"),
    $nextButton = $(".slideshow__next"),
    $prevButton = $(".slideshow__prev"),
    closeBlock = $(".slideshow__block"),
    slideInBlock = (".slideshow__slidein"),
    slideNext = $('.slideshow__forward').find('.slideshow__slidein'),
    slideBack = $('.slideshow__back').find('.slideshow__slidein'),
    clickCount = 0,
    clickCountImg = 1;

  $nextButton.click(function() {
    var circle = $(this).find('.circle'),
      line = $(this).find('.line'),
      block = $(this).parent().find('.slideshow__block'),
      slideIn = $(this).parent().find('.slideshow__slidein'),
      tl = new TimelineMax({
        onComplete: tlComplete
      }),
      tl2 = new TimelineMax();

    tl.set(circle, {
        x: 15,
        y: 15,
        scale: 0
      })
      .set(slideIn, {
        right: -350,
        opacity: 1
      }, 0)
      .set(block, {
        right: 270,
        opacity: 0
      }, 0)
      .set($nextButton, {
        zIndex: 1
      }, 0)
      .to(circle, 0.5, {
        scale: 1,
        transformOrigin: "50%, 50%",
        opacity: 1
      }, 0)
      .to(circle, 0.3, {
        opacity: 0
      })
      .to(line, 0.3, {
        scale: 0,
        transformOrigin: "50%, 50%"
      }, 0)
      .set(circle, {
        scale: 0,
        opacity: 0
      });

    function tlComplete() {
      tl2.to(slideIn, 0.5, {
          right: 0
        })
        .to(block, 0.5, {
          right: 350,
          opacity: 1
        }, 0)
    };

    function getLineback() {
      TweenMax.to(line, 0.3, {
        scale: 1,
        opacity: 1,
        delay: 0.5
      });
    };

    closeBlock.click(function() {
      tl2.reverse();
    });

    closeBlock.click(getLineback);

    $prevButton.click(function() {
      tl2.reverse();
    });

    $prevButton.click(getLineback);

  });

  $prevButton.click(function() {
    var circle = $(this).find('.circle'),
      line = $(this).find('.line'),
      block = $(this).parent().find('.slideshow__block'),
      slideIn = $(this).parent().find('.slideshow__slidein'),
      tl = new TimelineMax({
        onComplete: tlComplete
      }),
      tl2 = new TimelineMax();

    tl.set(circle, {
        x: 15,
        y: 15,
        scale: 0
      })
      .set(slideIn, {
        left: -350,
        opacity: 1
      }, 0)
      .set(block, {
        left: 270,
        opacity: 0
      }, 0)
      .set($prevButton, {
        zIndex: 1
      }, 0)
      .to(circle, 0.5, {
        scale: 1,
        transformOrigin: "50%, 50%",
        opacity: 1
      }, 0)
      .to(circle, 0.3, {
        opacity: 0
      })
      .to(line, 0.3, {
        scale: 0,
        transformOrigin: "50%, 50%"
      }, 0)
      .set(circle, {
        scale: 0,
        opacity: 0
      });

    function tlComplete() {
      tl2.to(slideIn, 0.3, {
          left: 0
        })
        .to(block, 0.3, {
          left: 350,
          opacity: 1
        }, 0);
    };

    function getLineback() {
      TweenMax.to(line, 0.3, {
        scale: 1,
        opacity: 1,
        delay: 0.5
      });
    };

    closeBlock.click(function() {
      tl2.reverse();
    })

    closeBlock.click(getLineback);

    $nextButton.click(function() {
      tl2.reverse();
    });

    $nextButton.click(getLineback);

  });

  slideNext.click(function() {
    clickCount++;
    clickCountImg++;

    var clickCountImgPrev = clickCountImg - 2;
    var firstImage = $('.slideshow__container li img:eq(0)'),
      imagePrev = $('.slideshow__container li img:eq(' + clickCountImgPrev + ')'),
      image = $('.slideshow__container li img:eq(' + clickCountImg + ')');

    if (clickCount > 3) {
      clickCount = 0;
    }
    if (clickCountImg > 3) {
      clickCountImg = 0;
      firstImage.clone().appendTo(slideNext);
    }

    TweenMax.to($slider, 0.5, {
      x: -clickCount * imgWidth
    })

    slideNext.children("img").remove();
    slideBack.children("img").remove();
    image.clone().appendTo(slideNext);
    imagePrev.clone().appendTo(slideBack);
    console.log(image);

    if (clickCountImg == 0) {
      firstImage.clone().appendTo(slideNext);
    }

  });

  slideBack.click(function() {
    clickCount--;
    clickCountImg--;

    var clickCountImgPrev = clickCountImg - 2,
      firstImage = $('.slideshow__container li img:eq(0)'),
      imagePrev = $('.slideshow__container li img:eq(' + clickCountImgPrev + ')'),
      image = $('.slideshow__container li img:eq(' + clickCountImg + ')');

    if (clickCount < 0) {
      clickCount = 3;
    }

    if (clickCountImg < 0) {
      clickCountImg = 3;
    }

    TweenMax.to($slider, 0.5, {
      x: -clickCount * imgWidth
    });

    slideNext.children("img").remove();
    slideBack.children("img").remove();

    imagePrev.clone().appendTo(slideBack);
    image.clone().appendTo(slideNext);

  });
});

This Pen is owned by Maarten Post on CodePen.

See more by @baarte on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript