<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 © 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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.