Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- BEGIN - SlideShow -->
- <div class="ImageSlider">
- <div class="ImageSlider-scroller">
- <ul class="ImageSlider-items">
- <li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/1.jpg);"></li>
- <li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/2.jpg);"></li>
- <li class="ImageSlider-item" style="background-image: url(http://vitas.sk/OnlineTv/images/3.jpg);"></li>
- </ul>
- <nav class="ImageSlider-indicators">
- <a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
- <a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
- <a href="javascript: void 0;" class="ImageSlider-indicator js-ImageSlider-dot"></a>
- </nav>
- </div>
- </div>
- <!-- END - SlideShow -->
- /* Image Slider */
- .ImageSlider {
- display: flex;
- align-items: stretch;
- height: 50%;
- }
- .ImageSlider-button {
- width: 40px;
- border: none;
- background: transparent;
- color: #000000;
- font-size: 40px;
- text-align: center;
- outline: none;
- opacity: 0.5;
- transition: opacity 300ms ease-out;
- }
- .ImageSlider-button:hover {
- opacity: 1;
- }
- .ImageSlider-scroller {
- flex: 1;
- overflow: hidden;
- position: relative;
- }
- .ImageSlider-items {
- margin: 0;
- padding: 0;
- list-style: none;
- white-space: nowrap;
- font-size: 0;
- line-height: 0;
- transition: transform 0.6s cubic-bezier(1, 0, 0, 1);
- }
- .ImageSlider-item {
- display: inline-block;
- padding-bottom: 31.25%;
- width: 100%;
- height: 100%;
- background-size: cover;
- background-position: 50% 50%;
- }
- .ImageSlider-indicators {
- list-style: none;
- padding: 0;
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- display: block;
- text-align: right;
- padding: 40px 140px;
- font-size: 0;
- }
- .ImageSlider-indicator {
- display: inline-block;
- text-decoration: none;
- color: #FFFFFF;
- font-weight: bold;
- border: 2px solid #FFFFFF;
- width: 14px;
- height: 14px;
- border-radius: 16px;
- margin: 0 4px;
- background-color: rgba(255, 255, 255, 0);
- transition: background-color 0.4s ease-in-out;
- }
- .ImageSlider-indicator:hover,
- .ImageSlider-indicator--is-active {
- background-color: #FFFFFF;
- }
- /* global Modernizr */
- if (!Object.assign) {
- Object.defineProperty(Object, 'assign', {
- enumerable: false,
- configurable: true,
- writable: true,
- value: function(target) {
- 'use strict';
- if (target === undefined || target === null) {
- throw new TypeError('Cannot convert first argument to object');
- }
- var to = Object(target);
- for (var i = 1; i < arguments.length; i++) {
- var nextSource = arguments[i];
- if (nextSource === undefined || nextSource === null) {
- continue;
- }
- nextSource = Object(nextSource);
- var keysArray = Object.keys(nextSource);
- for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
- var nextKey = keysArray[nextIndex];
- var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
- if (desc !== undefined && desc.enumerable) {
- to[nextKey] = nextSource[nextKey];
- }
- }
- }
- return to;
- }
- });
- }
- (function(window, document, Modernizr) {
- "use strict";
- var d = document;
- var transform = Modernizr.prefixed('transform');
- function ImageSliderIndicators(imageSlider, options) {
- this.imageSlider = imageSlider;
- this.options = Object.assign({}, ImageSliderIndicators.DEFAULTS, options || {});
- this.el = d.querySelector('.' + this.options.indicatorsClass);
- this.indicators = [].slice.call(d.querySelectorAll('.' + this.options.indicatorClass));
- this.imageSlider.el.addEventListener('positionChanged', this.onPositionChanged.bind(this));
- this.el.addEventListener('click', this.onIndicatorClick.bind(this), false);
- this.onPositionChanged();
- }
- ImageSliderIndicators.DEFAULTS = {
- indicatorsClass: 'ImageSlider-indicators',
- indicatorClass: 'ImageSlider-indicator',
- indicatorActiveClass: 'ImageSlider-indicator--is-active'
- };
- ImageSliderIndicators.prototype.onIndicatorClick = function onIndicatorClick(event) {
- var position = this.indicators.indexOf(event.target);
- if (position !== -1) {
- this.imageSlider.goto(position);
- }
- };
- ImageSliderIndicators.prototype.onPositionChanged = function onPositionChanged() {
- var self = this;
- this.indicators.forEach(function(element, index) {
- var action = index === self.imageSlider.position ? 'add' : 'remove';
- element.classList[action](self.options.indicatorActiveClass);
- });
- };
- function ImageSlider(options) {
- this.options = Object.assign({}, ImageSlider.DEFAULTS, options || {});
- this.position = 0;
- this.el = d.querySelector('.' + this.options.imageSliderClass);
- this.items = d.querySelector('.' + this.options.itemsClass);
- this.itemCount = d.querySelectorAll('.' + this.options.itemClass).length;
- this.scroller = d.querySelector('.' + this.options.scrollerClass);
- this.previousButton = d.querySelector('.' + this.options.previousButtonClass);
- this.nextButton = d.querySelector('.' + this.options.nextButtonClass);
- this.indicators = new ImageSliderIndicators(this, this.options.indicators);
- window.addEventListener('resize', this.render.bind(this));
- this.nextButton && this.nextButton.addEventListener('click', this.next.bind(this));
- this.previousButton && this.previousButton.addEventListener('click', this.previous.bind(this));
- }
- ImageSlider.DEFAULTS = {
- imageSliderClass: 'ImageSlider',
- itemsClass: 'ImageSlider-items',
- itemClass: 'ImageSlider-item',
- scrollerClass: 'ImageSlider-scroller',
- previousButtonClass: 'js-ImageSlider-button--previous',
- nextButtonClass: 'js-ImageSlider-button--next'
- };
- ImageSlider.prototype.render = function render() {
- this.items.style[transform] = 'translate3d(' + (-this.position * this.items.offsetWidth) + 'px,0,0)';
- };
- ImageSlider.prototype.goto = function goto(position) {
- var event = d.createEvent('Event');
- event.initEvent('positionChanged', true, true);
- this.position = position;
- this.el.dispatchEvent(event);
- this.render();
- };
- ImageSlider.prototype.previous = function previous() {
- this.goto((this.position + (this.itemCount - 1)) % this.itemCount);
- };
- ImageSlider.prototype.next = function next() {
- this.goto((this.position + 1) % this.itemCount);
- };
- window.ImageSlider = ImageSlider;
- }).call(this, window, window.document, Modernizr);
- new ImageSlider();
Add Comment
Please, Sign In to add comment