Controlled slider

controlled-slider.markdown

Controlled slider

A Pen by Dan Couper on CodePen.

License.

index.html

<div id="controlledSlideshow" class="slideshow">
  <div class="slideshow__panels">
    <div class="slideshow__panel current">
      <img class="slideshow__image" src="http://lorempixel.com/300/300/sports/1" />
      <footer class="slideshow__panel__footer">
        <p class="slideshow__panel__text">Cricket World Cup</p>
        <button class="slideshow__panel__callout">Bet Now</button>
      </footer>
    </div>
    <div class="slideshow__panel">
      <img class="slideshow__image" src="http://lorempixel.com/300/300/sports/2" />
      <footer class="slideshow__panel__footer">
        <p class="slideshow__panel__text">Some surfing shit</p>
        <button class="slideshow__panel__callout">Bet Now</button>
      </footer>
    </div>
    <div class="slideshow__panel">
      <img class="slideshow__panel__image" src="http://lorempixel.com/300/300/sports/3" />
      <footer class="slideshow__panel__footer">
        <p class="slideshow__panel__text">Tour de France</p>
        <button class="slideshow__panel__callout">Bet Now</button>
      </footer>
    </div>
  </div>
  <div class="slideshow__controls">
    <button class="slideshow__control slideshow__control--prev">◀</button>
    <button class="slideshow__control slideshow__control--next">▶</button>
  </div>
</div>

script.babel

class SimpleSlider {
  constructor({ sliderEl, panelEl, controlNext, controlPrev }) {
    const slider = document.querySelector(sliderEl);
    this.panels = slider.querySelectorAll(panelEl);
    this.prev = slider.querySelector(controlPrev);
    this.next = slider.querySelector(controlNext);
    this.sliderIndex = 0;
    this.max = this.panels.length - 1;
    this.interval = undefined;
  }

  nextHandler(e) {
    console.log('Next slide triggered!');
    this.stopAutoplay();
    const targetIndex = this.sliderIndex + 1 > this.max
      ? 0
      : this.sliderIndex + 1;
    this.panels[this.sliderIndex].classList.remove("current");
    this.panels[targetIndex].classList.add("current");
    this.sliderIndex = targetIndex;
    this.startAutoplay();
  }

  prevHandler() {
    console.log('Previous slide triggered!');
    this.stopAutoplay();
    const targetIndex = this.sliderIndex - 1 < 0
      ? this.max
      : this.sliderIndex - 1;
    this.panels[this.sliderIndex].classList.remove("current");
    this.panels[targetIndex].classList.add("current");
    this.sliderIndex = targetIndex;
    this.startAutoplay();
  }
  
  startAutoplay() {
    this.interval = setInterval(() => this.nextHandler(), 5000);
  }
  
  stopAutoplay() {
    clearInterval(this.interval);
  }

  init() {
    console.log('Slider initialised!');
    slider.prev.addEventListener("click", () => slider.prevHandler());
    slider.next.addEventListener("click", () => slider.nextHandler());
    this.startAutoplay();
  }
}

const slider = new SimpleSlider({
  sliderEl: "#controlledSlideshow",
  panelEl: ".slideshow__panel",
  controlPrev: ".slideshow__control--prev",
  controlNext: ".slideshow__control--next"
});

slider.init();

style.scss

.slideshow {
	width: 100%;
	height: 100%;
	position: relative;
}

.slideshow__controls {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
}

.slideshow__control {
  background: 0;
  border: 0;
  padding: 0;
  font-size: 1.5rem;
  color: white;
}

.slideshow__panels {
	height: 100%;
	position: relative;
}

.slideshow__panel {
	width: 100%;
	height: 100%;
	position: absolute;
  overflow: hidden;
  opacity: 0;
  transition: .75s;
}

.slideshow__panel.current {
  opacity: 1;
  transition: .75s;
}

.slideshow__panel__image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.slideshow__panel__footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0,0,0,.5);
}

.slideshow__panel__text {
  color: white;
  margin: .75rem;
}

.slideshow__panel__callout {
  padding: .75rem;
  border: 0;
  border-radius: .05rem;
  background-color: #EFC334;
  text-transform: uppercase;
  font-weight: bold;
  margin: .75rem;
}