Carousel

Carousel.markdown

Carousel

Settings:

• controls DOM reference (obj);
• carousel DOM reference (obj);
• pager DOM reference (obj);
• autoplay (bool);
• loop (bool);
• direction (bool);
• slides (arr);
• timeout

A Pen by V on CodePen.

License.

index.jade

- var buttons = {start:'start',stop:'stop'};

div(class='controls')
  button(id="btn-start")=buttons.start
  button(id="btn-stop")=buttons.stop
div(class='carousel')
  img(src='http://jade-lang.com/style/jade-logo-header.svg',class="init",id="sliding-img")
  div(class="pager")

script.babel

let bodyHeight, navHeight;
$(document).on('ready',() => {
  bodyHeight = $('body').height(),
  navHeight = $('.controls').height();
  $('.carousel').css('height',bodyHeight-navHeight);
  $('.carousel').find('#sliding-img').css('max-height',bodyHeight-navHeight);
});
$(window).on('resize',() => {
  $('.carousel').css('height',bodyHeight-navHeight);
});

function Carousel(settings) {
  this.DOMcontrolsRef = settings.DOMcontrolsRef || document.querySelector('.controls');
  this.controlButtons = this.DOMcontrolsRef.querySelectorAll('button') || [];
  this.DOMobjectRef = settings.DOMobjectRef || document.querySelector('.carousel');
  this.DOMpagerRef = settings.DOMpagerRef || document.querySelector('.pager');
  this.autoplay = settings.autoplay || false;
  this.loop = settings.loop || false; // true - loop, false - ping-pong
  this.direction = true; // true - forward, false - backward
  this.slides = settings.slides || [
    'http://jade-lang.com/style/jade-logo-header.svg',
    'https://upload.wikimedia.org/wikipedia/en/9/9e/JQuery_logo.svg',
    'https://upload.wikimedia.org/wikipedia/commons/9/96/Sass_Logo_Color.svg'
  ];
  this.slidesLength = this.slides.length;
  this.pagerMarkers = [];
  this.currentSlide = 0;
  this.timeout = settings.timeout || 3000;
  this.timers = [];
  this.renderSlides = () => {
    this.DOMobjectRef.querySelector('img').style.height = $('body').height()-$('.controls').height();
    this.DOMobjectRef.querySelector('img').setAttribute('src',this.slides[this.currentSlide]);
    this.DOMobjectRef.querySelector('img').style.WebkitTransition = "all 0s";
    this.DOMobjectRef.querySelector('img').style.transition = "all 0s";
    this.DOMobjectRef.querySelector('img').setAttribute('class','slide-right');
    setTimeout(()=>{
      this.DOMobjectRef.querySelector('img').style.WebkitTransition = "all 1s";
      this.DOMobjectRef.querySelector('img').style.transition = "all 1s";
      this.DOMobjectRef.querySelector('img').setAttribute('class','init');
    }, 150);
    setTimeout(()=>{
      //this.DOMobjectRef.querySelector('img').style.WebkitTransition = "all 1s";
      //this.DOMobjectRef.querySelector('img').style.transition = "all 1s";
      this.DOMobjectRef.querySelector('img').setAttribute('class','slide-left');
      if (this.stopped) {
        this.DOMobjectRef.querySelector('img').style.WebkitTransition = "all 0s";
        this.DOMobjectRef.querySelector('img').style.transition = "all 0s";
        this.DOMobjectRef.querySelector('img').setAttribute('class','init');
      }
    }, 2000);
  };
  this.start = () => {
    console.log('start');
    let scope = this;
    let tmr = setInterval(() => {
      //console.log('slide: '+scope.currentSlide);
      scope.renderSlides();
      for (let i in scope.pagerMarkers) scope.pagerMarkers[i].setAttribute('class','');
      scope.pagerMarkers[scope.currentSlide].setAttribute('class','selected');
      if (scope.currentSlide < scope.slidesLength-1 && scope.direction) scope.currentSlide++;
      else if (scope.currentSlide > 0 && !scope.direction) scope.currentSlide--;
      else if (scope.loop) scope.currentSlide = 0;
      else if (scope.currentSlide == scope.slidesLength-1) {
        scope.direction = false;
        scope.currentSlide--;
      }else if (scope.currentSlide == 0) {
        scope.direction = true;
        scope.currentSlide++;
      }
      //console.log('next slide: '+scope.currentSlide);
    },scope.timeout);
    this.timers.push(tmr);
    this.controlButtons[0].removeEventListener('click',this.start);
    this.controlButtons[1].addEventListener('click',this.stop);
  };
  this.stopped = false;
  this.stop = () => {
    console.log('stop');
    for (let i in this.timers) clearInterval(this.timers[i]);
    this.stopped = true;
    this.timers = [];
    this.controlButtons[0].addEventListener('click',this.start);
    this.controlButtons[1].removeEventListener('click',this.stop);
  };
  // init
  for (let i in this.slides){
    let node = document.createElement('span');
    let img = document.createElement('img');
    img.setAttribute('src',this.slides[i]);
    img.style.height = '100%';
    img.style.width = '100%';
    node.appendChild(img);
    node.style.display = 'inline-block';
    node.style.textAlign = 'center';
    node.style.height = '100%';
    node.style.width = (100/(this.slides.length))+'%';
    this.DOMpagerRef.appendChild(node);
    this.pagerMarkers.push(node);
  }
  //console.log(this.pagerMarkers);
  if (this.autoplay) {
    this.start();
    this.controlButtons[0].removeEventListener('click',this.start);
    this.controlButtons[1].addEventListener('click',this.stop);
  }else this.controlButtons[0].addEventListener('click',this.start);
}
let settings = {};
//settings.DOMcontrolsRef = document.querySelector('.controls');
//settings.DOMobjectRef = document.querySelector('.carousel');
//settings.DOMpagerRef = document.querySelector('.pager');
settings.autoplay = false;
settings.loop = true;
//settings.slides = [];
//settings.timeout = 5000;
let carousel = new Carousel(settings);

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.sass

$white: #ffffff
$white-transparent: rgba(255,255,255,0.4)
$black: #000000
$grey: #a2a2a2
$text-padding: 0.5em
$max-percent: 100%
body
  margin: 0
  height: 100vh
  .controls
    display: block
    background: $grey
    overflow: hidden
    color: $white
    text-align: center
    button
      width: 48%
      height: 10vh
      margin: 0.15em 0 0 0
      text-transform: uppercase
      &:hover
        cursor: pointer
  .carousel
    display: block
    position: absolute
    width: $max-percent
    height: $max-percent
    background: $black
    overflow: hidden
    img.init
      width: $max-percent
      position: absolute
      left: 0%
      right: 0%
    img.slide-left
      width: $max-percent
      position: absolute
      left: -100%
      right: 100%
    img.slide-right
      width: $max-percent
      position: absolute
      left: 100%
      right: -100%
    .pager
      display: block
      position: absolute
      bottom: 0
      background: $white-transparent
      width: 100%
      height: 15%
    .selected
      background: $white