Author: | balapa |
---|---|
Views Total: | 6,789 views |
Official Page: | Go to website |
Last Update: | April 8, 2016 |
License: | MIT |
Preview:

Description:
A pure JavaScript image slider that comes with a subtle masking effect using the CSS clip-path property.
How to use it:
Load the ionicons for the nav arrows of your image slider.
<link rel='stylesheet' href='ionicons.min.css'>
Create the image slider with captions using html5 figure
and figcaption
tags.
<div class="slider-ctr"> <figure class="slide"><img src="1.jpeg"> <figcaption> <div class="title">Image 1</div> <div class="author">Author 1</div> </figcaption> </figure> <figure class="slide"><img src="2.jpeg"> <figcaption> <div class="title">Image 2</div> <div class="author">Author 2</div> </figcaption> </figure> <figure class="slide"><img src="3.jpeg"> <figcaption> <div class="title">Image 3</div> <div class="author">Author 3</div> </figcaption> </figure> <figure class="slide text-on"><img src="4.jpeg"> <figcaption> <div class="title">Image 4</div> <div class="author">Author 4</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>
The main CSS/CSS3 styles for the slider and its inner content.
.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; } .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: .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 the slider’s nav control.
.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: .3s all ease; background: white; } .slider-control .control .icon { pointer-events: none; transition: .3s all ease; } .slider-control .control.disabled { pointer-events: none; background: #ddd; } .slider-control .control.disabled .icon { opacity: .5; }
The core JavaScript to active the image slider.
// 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"); } } });
Hi,
How to make slider autoplay ?