LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS
html {
  height: 100%;
}

body {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-size: 28px;
  font-weight: 100;
  margin: 0;
  min-height: 100%;
  padding: 0;
}

h1 {
  font-size: 48px;
  font-weight: 300;
  margin: 0 0 .1em;
}

p {
  margin: 0;
}

.carousel {
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	overflow: hidden;
  padding: 40px 0;
	position: relative;
	width: 100vw;
}

.carousel > .container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform 600ms;
	transition: -webkit-transform 600ms;
	transition: transform 600ms;
	transition: transform 600ms, -webkit-transform 600ms;
}

.carousel > nav {
	bottom: 0;
	left: 0;
	position: absolute;
	text-align: center;
	width: 100vw;
	z-index: 1;
}

.carousel > nav a {
	color: #000;
	font-size: 14px;
	opacity: .2;
	text-decoration: none;
}

.carousel > nav a:hover {
	opacity: .5;
}

.carousel > nav a.current {
	opacity: 1;
}

.carousel .slide {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	line-height: 1.4;
	text-align: center;
	width: 100vw;
}
JS
function Carousel(element) {
  this._autoDuration = 0;
  this._container = element.querySelector('.container');
  this._interval = null;
  this._nav = element.querySelector('nav');
  this._slide = 0;
  this._touchAnchorX = 0;
  this._touchTime = 0;
  this._touchX1 = 0;
  this._touchX2 = 0;
  element.addEventListener('click', this);
  element.addEventListener('touchstart', this);
  element.addEventListener('touchmove', this);
  element.addEventListener('touchend', this);
  element.addEventListener('transitionend', this);
  window.addEventListener('blur', this);
  window.addEventListener('focus', this);
  this.set(0);
}

Carousel.prototype.auto = function (ms) {
  if (this._interval) {
    clearInterval(this._interval);
    this._interval = null;
  }
  if (ms) {
    this._autoDuration = ms;
    var self = this;
    this._interval = setInterval(function () { self.next(); }, ms);
  }
}

Carousel.prototype.handleEvent = function (event) {
  if (event.touches && event.touches.length > 0) {
    this._touchTime = +new Date;
    this._touchX1 = this._touchX2;
    this._touchX2 = event.touches[0].screenX;
  }

  var screen = document.documentElement.clientWidth;
  var position = this._slide + (this._touchAnchorX - this._touchX2) / screen;
  var velocity = (new Date - this._touchTime) <= 200 ? (this._touchX1 - this._touchX2) / screen : 0;

  switch (event.type) {
    case 'blur':
      this.auto(0);
      break;
    case 'click':
      if (event.target.parentNode != this._nav) break;
      var i = parseInt(event.target.dataset.slide);
      if (!isNaN(i)) {
        event.preventDefault();
        this.auto(0);
        this.set(i);
      }
      break;
    case 'focus':
      this.auto(this._autoDuration);
      break;
    case 'touchstart':
      event.preventDefault();
      this.auto(0);
      this._container.style.transition = 'none';
      this._touchAnchorX = this._touchX1 = this._touchX2;
      break;
    case 'touchmove':
      this._container.style.transform = 'translate3d(' + (-position * 100) + 'vw, 0, 0)';
      break;
    case 'touchend':
      this._container.style.transition = '';
      var offset = Math.min(Math.max(velocity * 4, -0.5), 0.5);
      this.set(Math.round(position + offset));
      break;
    case 'transitionend':
      var i = this._slide, count = this._countSlides();
      if (i >= 0 && i < count) break;
      // The slides should wrap around. Instantly move to just outside screen on the other end.
      this._container.style.transition = 'none';
      this._container.style.transform = 'translate3d(' + (i < 0 ? -count * 100 : 100) + 'vw, 0, 0)';
      // Force changes to be applied sequentially by reflowing the element.
      this._container.offsetHeight;
      this._container.style.transition = '';
      this._container.offsetHeight;
      // Animate the first/last slide in.
      this.set(i < 0 ? count - 1 : 0);
      break;
  }
};

Carousel.prototype.next = function () {
  this.set(this._slide + 1);
};

Carousel.prototype.previous = function () {
  this.set(this._slide - 1);
};

Carousel.prototype.set = function (i) {
  var count = this._countSlides();
  if (i < 0) { i = -1; } else if (i >= count) { i = count; }
  this._slide = i;
  this._container.style.transform = 'translate3d(' + (-i * 100) + 'vw, 0, 0)';
  this._updateNav();
};

Carousel.prototype._countSlides = function () {
  return this._container.querySelectorAll('.slide').length;
};

Carousel.prototype._updateNav = function () {
  var html = '', count = this._countSlides();
  for (var i = 0; i < count; i++) {
    if (i > 0) html += ' ';
    html += '●';
  }
  this._nav.innerHTML = html;
}

var carousels = Array.prototype.map.call(document.querySelectorAll('.carousel'), function (element) {
  var carousel = new Carousel(element);
  carousel.auto(5000);
  return carousel;
});
Host Instantly Drag and Drop Website Builder

 

Description

A very simple implementation of a carousel that automatically switches slides (until user interaction) and works with both mouse and touch events. It's build to be performant, by using web animations instead of JavaScript for movement.
Term
Mon, 11/27/2017 - 22:04

Related Codes

Pen ID
Pen ID
Pen ID