<div class="header">
  <h1>
        ESlider - v1.0
    </h1>

  <span>
        Just another awesome slider
    </span>
</div>

<div id="slider-1"></div>

<div class="footer">
  <span>
        EvyatarDaud 2016 &copy; All rights reserved
    </span>
</div>
/* General */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
body
{
    margin: 0;
}

.header, .footer
{
    background: #444; 
    margin: 0px; 
    color: rgb(255, 255, 255); 
    font-family: Raleway; 
    text-align: center; 
    padding: 80px;
}

.header h1
{
    margin: 0px; 
    padding: 0px;
}

.header span, .footer span
{
    color: #AAA;
}

.ESlider
{
    margin: 0 auto !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* 
    Name: ESlider v1.0
    Author: Evyatar Daud
*/

.ESlider
{
    width: 800px;
    max-width: 100%;
    margin: 10px auto;
    background: transparent;
    box-shadow: 0px 0px 5px 1px #AAA;
    overflow: hidden;
    position: relative;
    transition: 0.2s all;
}

.ESlider .ESlider-slide
{
    position: absolute;
    left: 0;
    transform: scale(1.1);
    top: 0;
    width: 100%;
    height: auto;
    display: inline-block;
    opacity: 0;
    transition: 0.5s all;
}

.ESlider .ESlider-active-slide
{
    opacity: 1;
    left: 0;
    transform: scale(1);
}

.ESlider .ESlider-bulks-container 
{
    position: absolute;
    bottom: -30px;
    opacity: 0;
    transition: 0.3s all ease-out;
    width: 100%;
    text-align: center;
}

.ESlider:hover .ESlider-bulks-container
{
    opacity: 1;
    bottom: 10px;
}

.ESlider .ESlider-bulk 
{
    display: inline-block;
    height: 10px;
    width: 10px;
    background: transparent;
    border: 1px solid #FFF;
    box-shadow: 0px 0px 1px 1px #777, 0px 0px 1px 1px #777 inset;
    position: relative;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.5s all ease-out;
}

.ESlider .ESlider-bulk:hover, .ESlider .ESlider-active-bulk
{
    background: #FFF !important;
    box-shadow: 0px 0px 1px 1px #777 !important;
}

.ESlider .ESlider-bulk .ESlider-thumbnail
{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 100%;
    height: 50px;
    border: 2px solid #FFF;
    box-shadow: 0px 0px 2px 1px #777;
    transition: 0.3s all;
}

.ESlider .ESlider-bulk:after
{
    content: '';
    display: block;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    bottom: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top-color: #FFF;
    margin-bottom: -10px;
    transition: 0.3s all;
}

.ESlider .ESlider-bulk:hover .ESlider-thumbnail, .ESlider .ESlider-bulk:hover:after
{
    visibility: visible;
    opacity: 1;
    margin-bottom: 10px;
}

.ESlider .ESlider-bulk:hover:after
{
    margin-bottom: 0;
}

.ESlider .ESlider-previous, .ESlider .ESlider-next
{
    position: absolute;
    top: 0;
    height: 100%;
    width: 10%;
    background: rgba(0,0,0,0.1);
    transition: 0.3s all;
}

.ESlider .ESlider-previous:before, .ESlider .ESlider-previous:after, .ESlider .ESlider-next:before, .ESlider .ESlider-next:after
{
    content: '';
    display: block;
    position: absolute;
    height: 20px;
    width: 2px;
    background: #FFF;
    top: 50%;
    margin-top: -10px;
}

.ESlider .ESlider-previous:before { transform: rotate(45deg) translateY(-50%); }
.ESlider .ESlider-previous:after { transform: rotate(-45deg) translateY(50%); }

.ESlider .ESlider-next:before { transform: rotate(-45deg) translateY(-50%); }
.ESlider .ESlider-next:after { transform: rotate(45deg) translateY(50%); }

.ESlider .ESlider-previous:before, .ESlider .ESlider-previous:after
{
    left: 50%;
    margin-left: -10px;
}

.ESlider .ESlider-next:before, .ESlider .ESlider-next:after
{
    right: 50%;
    margin-right: -10px;
}

.ESlider .ESlider-previous:hover, .ESlider .ESlider-next:hover { background: rgba(0,0,0,0.3); }
.ESlider .ESlider-previous { left: -10%; }
.ESlider .ESlider-next { right: -10%; }
.ESlider:hover .ESlider-previous { left: 0; }
.ESlider:hover .ESlider-next { right: 0; }
window.onload = function() {
  var slider = new ESlider("#slider-1", [
    "http://www.planwallpaper.com/static/images/beach-cool-wallpaper-hd_1.jpg",
    "https://static.pexels.com/photos/9574/pexels-photo.jpeg",
    "http://www.hd-wallpapersdownload.com/script/bulk-upload/download-hd-wallpapers-hd-for-mobile-3D.jpg",
    "http://allpicts.in/wp-content/uploads/2015/02/3d-nature-wallpaper-landscape-photo-of-mountaint.jpg",
    "http://www.ultrahdwallpapers.net/images/6.jpg",
    "https://4.bp.blogspot.com/-jS9AKEwPeHQ/UxeSbPDXWjI/AAAAAAAApWM/-emBFoRWuwU/s0/Aston+Martin+Supercars_Ultra+HD.jpg",
    "http://hdfreewallpaper.net/wp-content/uploads/2016/03/stain-glass-window-free-hd-wallpapers.jpg"
  ]);
}

/* 
    Name: ESlider v1.0
    Author: Evyatar Daud
*/

var ESlider = function(slider, images) {
  /* Function: Get Element by Selector */
  var _ = function(selector) {
    return document.querySelector(selector);
  }

  /* Function: Get All Elements by Selector */
  var __ = function(selector) {
    return document.querySelectorAll(selector);
  }

  /* Declare class variables */
  this.slider = _(slider);
  this.images = images;
  this.slides = "";
  this.currentSlide;

  /* Add ESlider class to the slider */
  this.slider.classList.add("ESlider");

  /* Create slides */
  this.slides = "";
  this.bulks = "<div class='ESlider-bulks-container'>";
  this.images.forEach(function(image, index) {
    this.slides += "<img class='ESlider-slide ESlider-slide-" + (index + 1) + "' src='" + image + "' />";
    this.bulks += "<span class='ESlider-bulk' data-slide-id='"+ (index+1) + "'><img src='" + image + "' class='ESlider-thumbnail' /></span>";
  }.bind(this));

  /* Set slides */
  this.bulks += "</div>";
  this.contronls = "<span class='ESlider-previous'></span><span class='ESlider-next'></span>";
  this.slider.innerHTML += this.slides + this.bulks + this.contronls;

  /* Function: Set Slider Auto Sliding */
  this.interval = function() {
    this.autoSlide = setInterval(function() {
      this.next();
    }.bind(this), 5000);
  }.bind(this);

  /* Function: Change Slide */
  this.setSlide = function(id) {
    clearInterval(this.autoSlide);
    /* hide current slide */
    if (_(slider + " .ESlider-active-slide") != null)
      _(slider + " .ESlider-active-slide").classList.remove("ESlider-active-slide");

    /* reset active bulk */
    if (_(slider + " .ESlider-active-bulk") != null)
      _(slider + " .ESlider-active-bulk").classList.remove("ESlider-active-bulk");

    /* show new slide */
    _(slider + " .ESlider-slide-" + id).classList.add("ESlider-active-slide");
    _(slider + " .ESlider-bulk[data-slide-id='" + id + "']").classList.add("ESlider-active-bulk");
    _(slider).style.height = _(slider + " .ESlider-slide-" + id).clientHeight + "px";

    this.currentSlide = id;

    this.interval();
  }

  /* Function: Next Slide */
  this.next = function() {
    if (this.currentSlide == this.images.length)
      this.currentSlide = 1;

    else
      this.currentSlide++;

    this.setSlide(this.currentSlide);
  }

  /* Function: Previous Slide */
  this.previous = function() {
    if (this.currentSlide == 1)
      this.currentSlide = this.images.length;

    else
      this.currentSlide--;

    this.setSlide(this.currentSlide);
  }

  /* Set Bulks event listeners */
  var bulks = __(slider + " .ESlider-bulk");
  for (var i = 0; i < bulks.length; i++) {
    bulks[i].addEventListener("click", function(e) {
      var slideID = e.target.dataset.slideId;
      this.setSlide(slideID);
    }.bind(this));
  }

  _(slider + " .ESlider-previous").addEventListener("click", function(e) {
    this.previous();
  }.bind(this));

  _(slider + " .ESlider-next").addEventListener("click", function(e) {
    this.next();
  }.bind(this));

  /* Set First Slide */
  this.setSlide(1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.