<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section> <article class="slider"> <div class="slider__slides"> <div class="slider__slide"> </div> <!-- /.slider__slide --> <div class="slider__slide"> </div> <!-- /.slider__slide --> <div class="slider__slide"> </div> <!-- /.slider__slide --> <div class="slider__slide"> </div> <!-- /.slider__slide --> <div class="slider__slide"> </div> <!-- /.slider__slide --> </div> <!-- /.slider__slides --> <div class="slider__controls"> <div class="slider__control"> <div class="slider__control-line"> </div> <!-- /.slider__control-line --> <div class="slider__control-line"> </div> <!-- /.slider__control-line --> </div> <!-- /.slider__control --> <div class="slider__control"> <div class="slider__control-line"> </div> <!-- /.slider__control-line --> <div class="slider__control-line"> </div> <!-- /.slider__control-line --> </div> <!-- /.slider__control --> </div> <!-- /.slider__controls --> </article> <!-- /.slider --> </section>

/*************************** * Variables **************************/ /*************************** * Functions **************************/ /*************************** * Project Main Styles **************************/ *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Open Sans", sans-serif; font-size: 1em; background-color: #e2e2e2; } /*************************** * Application Main Styles **************************/ .slider { -webkit-animation: clipPathAnimation 3.159s; animation: clipPathAnimation 3.159s; } .slider__slides { position: relative; z-index: 0; } .slider__slides .slider__slide { position: absolute; top: 0; width: 100%; height: 100vh; background-size: cover; opacity: 0; -webkit-transition: opacity 1.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 1.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 1.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 1.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 1.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 1.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 1.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 1.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 1.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .slider__slides .slider__slide:nth-child(1) { background-image: url("https://s-media-cache-ak0.pinimg.com/originals/53/7d/e5/537de57542952135948c475e676837fe.jpg"); } .slider__slides .slider__slide:nth-child(2) { background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a6/c8/19/a6c81935008dd96768a48acc73a14f7e.jpg"); } .slider__slides .slider__slide:nth-child(3) { background-image: url("https://s-media-cache-ak0.pinimg.com/originals/fd/56/66/fd56662ef0b055c93e073843676139e8.jpg"); } .slider__slides .slider__slide:nth-child(4) { background-image: url("https://s-media-cache-ak0.pinimg.com/originals/4a/08/96/4a0896090fcdb5c99228cad4ce80ec58.jpg"); } .slider__slides .slider__slide:nth-child(5) { background-image: url("https://s-media-cache-ak0.pinimg.com/originals/05/61/6e/05616e485f85c38fd9d0a38812e5975b.jpg"); } .slider__slides .js-slide--active { opacity: 1; z-index: 10; -webkit-transform: scale(0.97); transform: scale(0.97); } .slider__controls { z-index: 10; } .slider__controls .slider__control { position: absolute; top: 50%; width: 5em; height: 5em; margin-top: -2.5em; background-color: #e2e2e2; border-radius: 50%; box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2); opacity: .9; cursor: pointer; } .slider__controls .slider__control:hover { background-color: #282828; } .slider__controls .slider__control:nth-child(1) { left: 3vw; } .slider__controls .slider__control:nth-child(1) .slider__control-line { position: absolute; top: 50%; left: 40%; width: 3%; height: 1em; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .slider__controls .slider__control:nth-child(1) .slider__control-line:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #282828; -webkit-transition: background-color undefined; transition: background-color undefined; } .slider__controls .slider__control:nth-child(1) .slider__control-line:nth-child(2) { -webkit-transform: translateY(1px) rotate(-135deg); transform: translateY(1px) rotate(-135deg); } .slider__controls .slider__control:nth-child(1):hover .slider__control-line { position: absolute; top: 50%; left: 40%; width: 3%; height: 1em; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .slider__controls .slider__control:nth-child(1):hover .slider__control-line:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e2e2e2; -webkit-transition: background-color undefined; transition: background-color undefined; } .slider__controls .slider__control:nth-child(1):hover .slider__control-line:nth-child(2) { -webkit-transform: translateY(1px) rotate(-135deg); transform: translateY(1px) rotate(-135deg); } .slider__controls .slider__control:nth-child(2) { right: 3vw; } .slider__controls .slider__control:nth-child(2) .slider__control-line { position: absolute; top: 50%; left: 58%; width: 3%; height: 1em; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .slider__controls .slider__control:nth-child(2) .slider__control-line:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #282828; -webkit-transition: background-color 1.3s; transition: background-color 1.3s; } .slider__controls .slider__control:nth-child(2) .slider__control-line:nth-child(2) { -webkit-transform: translateY(1px) rotate(135deg); transform: translateY(1px) rotate(135deg); } .slider__controls .slider__control:nth-child(2):hover .slider__control-line { position: absolute; top: 50%; left: 58%; width: 3%; height: 1em; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .slider__controls .slider__control:nth-child(2):hover .slider__control-line:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e2e2e2; -webkit-transition: background-color 1.3s; transition: background-color 1.3s; } .slider__controls .slider__control:nth-child(2):hover .slider__control-line:nth-child(2) { -webkit-transform: translateY(1px) rotate(135deg); transform: translateY(1px) rotate(135deg); } .slider__controls .slider__control.js-control--active:nth-child(1), .slider__controls .slider__control.js-control--active:nth-child(2) { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: controlLeftActiveAnimation 1.299s; animation: controlLeftActiveAnimation 1.299s; } /** * Animations */ @-webkit-keyframes clipPathAnimation { 0% { -webkit-clip-path: ellipse(0 0 at 50% 50%); clip-path: ellipse(0 0 at 50% 50%); } 100% { -webkit-clip-path: ellipse(100% 100% at 50% 50%); clip-path: ellipse(100% 100% at 50% 50%); } } @keyframes clipPathAnimation { 0% { -webkit-clip-path: ellipse(0 0 at 50% 50%); clip-path: ellipse(0 0 at 50% 50%); } 100% { -webkit-clip-path: ellipse(100% 100% at 50% 50%); clip-path: ellipse(100% 100% at 50% 50%); } } @-webkit-keyframes controlLeftActiveAnimation { 0% { width: 0; border-radius: 0; box-shadow: none; opacity: 0; -webkit-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0); } 100% { -webkit-transform: rotate(1080deg) scale(1); transform: rotate(1080deg) scale(1); } } @keyframes controlLeftActiveAnimation { 0% { width: 0; border-radius: 0; box-shadow: none; opacity: 0; -webkit-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0); } 100% { -webkit-transform: rotate(1080deg) scale(1); transform: rotate(1080deg) scale(1); } } @-webkit-keyframes controlRightActiveAnimation { 0% { width: 0; border-radius: 0; box-shadow: none; opacity: 0; -webkit-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0); } 100% { -webkit-transform: rotate(-1080deg) scale(1); transform: rotate(-1080deg) scale(1); } } @keyframes controlRightActiveAnimation { 0% { width: 0; border-radius: 0; box-shadow: none; opacity: 0; -webkit-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0); } 100% { -webkit-transform: rotate(-1080deg) scale(1); transform: rotate(-1080deg) scale(1); } }

'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } /********************* * Helpers Code ********************/ /** * @function DOMReady * * @param callback * @param element * @param listener * @returns {*} * @constructor */ var DOMReady = function DOMReady() { var callback = arguments.length <= 0 || arguments[0] === undefined ? function () {} : arguments[0]; var element = arguments.length <= 1 || arguments[1] === undefined ? document : arguments[1]; var listener = arguments.length <= 2 || arguments[2] === undefined ? 'addEventListener' : arguments[2]; return element[listener] ? element[listener]('DOMContentLoaded', callback) : window.attachEvent('onload', callback); }; /********************* * Application Code ********************/ /** * @class SimpleSlider */ var SimpleSlider = function () { /** * @constructor * * @param element * @param options */ function SimpleSlider(element) { var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1]; _classCallCheck(this, SimpleSlider); this.el = document.querySelector(element); this.options = Object.assign({ 'slides': '.slider__slide', 'controls': '.slider__control', 'sliding-time-seconds': '1.3', 'js-slide': '.js-slide', 'js-control': '.js-control' }, options); this.init(); } /** * @function init * * @public */ SimpleSlider.prototype.init = function init() { var _this = this; this.slides = this.el.querySelectorAll(this.options.slides); this.controls = this.el.querySelectorAll(this.options.controls); this.countOfSlides = this.slides.length; this.slidingTime = this.options['sliding-time-seconds'] * 1000; this.slidingLock = false; [].slice.call(this.slides).forEach(function (el, index) { var i = index + 1; el.classList.add(_this.options['js-slide'].substring(1) + '--' + i); el.dataset.slide = i; if (i === 1) { el.classList.add(_this.options['js-slide'].substring(1) + '--active'); } }); [].slice.call(this.controls).forEach(function (el, index) { var elData = el.dataset, i = index + 1; i === 1 ? elData.control = 'left' : elData.control = 'right'; el.addEventListener('click', _this._controlAction.bind(_this, el), false); }); }; /** * @function _controlAction * * @param el * @private */ SimpleSlider.prototype._controlAction = function _controlAction(el) { var _this2 = this; if (this.slidingLock) { return; } this.slidingLock = true; var currentControl = el, currentActive = this.el.querySelector(this.options['js-slide'] + '--active'), isLeftControl = currentControl.getAttribute('data-control') === 'left', indexOfCurrentSlide = +currentActive.getAttribute('data-slide'), newActive = undefined, jsSlideActive = this.options['js-slide'].substring(1) + '--active', jsSlideActivePrev = this.options['js-slide'].substring(1) + '--active-prev', jsControlActive = this.options['js-control'].substring(1) + '--active'; isLeftControl ? --indexOfCurrentSlide : ++indexOfCurrentSlide; if (indexOfCurrentSlide < 1) { indexOfCurrentSlide = this.countOfSlides; } if (indexOfCurrentSlide > this.countOfSlides) { indexOfCurrentSlide = 1; } newActive = this.el.querySelector(this.options['js-slide'] + '--' + indexOfCurrentSlide); isLeftControl ? newActive.classList.add(jsSlideActive, jsSlideActivePrev) : newActive.classList.add(jsSlideActive); currentControl.classList.add(jsControlActive); currentActive.classList.remove(jsSlideActive, jsSlideActivePrev); setTimeout(function () { currentControl.classList.remove(jsControlActive); _this2.slidingLock = false; }, this.slidingTime); }; return SimpleSlider; }(); /** * @function readyFunction * * @type {Function} */ var readyFunction = function readyFunction() { return new SimpleSlider('.slider'); }; /** * Launcher */ DOMReady(readyFunction);