Style a Image Slider

Introduction

By image slider, a component that displays a single image out of a set of images is meant. The slider contains controls to switch to a different image. The slider can be controlled via direct user input or indirectly via a timer that automatically operates the image slider.

The Purpose of a slider is similar to an automated marketing presentation or sales video. It is there to catch a visitor, generate attention and interest and to advertise an idea or product to a user that generally has no time to loose.

Features

Features of a slider are:

  • Display an array of images
  • Width, height, general responsiveness
  • Dotted button navigation, minimum, maximum amount of dots
  • Left-right arrow button navigation
  • Mouse- or Thumb Drag navigation (swipe left and right) 
  • Navigation wrap-around
  • Cooldown/Countdown timer that initiates the next transition automatically
  • User interaction with the dotted button navigation will interrupt the automated timer to give the user time. The timer will take over again after some time.
  • Transition default direction or pattern (To-Right, To-Left, Random, …)
  • Animation options for the transition between images (slide, shrink, grow, opacity, alpha, …)

Minimum Viable Product – MVP

Creating an MVP that contains the subset of all features that constitutes the bare minimum to be recognized by a user as a usable component that has benefit, is a strategy to arrive at a result without getting side-tracked and loosing focus.

Why is an MVP important? In short, the main problem is our limited experience when approaching a topic for the first time. Because of all the unknown road blocks a beginner will face on his learning journey, there is natural delay and natural feature creep. Features creep in because unknown requirements pop up and features have to be added to even get the most limited MVP working.

The image slider MVP will 

  • Display three images
  • Contain no navigation
  • Transition between images on click on the current image
  • Transition direction is fixed: to-right is used
  • Contains no wrap-around
  • The transition is not animated, the images just are exchanged
  • The slider is not responsive

MVP Implementation

The HTML markup contains the three slides

<div class="wrapper">
  <div class="slides">

    <div class="slide active">
      First
      <img src="../img/mountain-1.jpeg">
    </div>

    <div class="slide">
      Second
      <img src="../img/mountain-2.jpeg">
    </div>

    <div class="slide">
      Third
      <img src="../img/mountain-3.jpeg">
    </div>

  </div>
</div>

The CSS contains general styling for the slides which sets all slides into th e display:none state which hides all slides. in addition it contains a CSS class called active. This active class sets display:block on one of the slides to show that slide.

html, body {
  width: 100%;
  height: 100%;
}

.wrapper {
  height: 100%;
}

.slides {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide {
  display: none;

  width: 100px;
  height: 100px;
  background-color: red;
}

.slide.active {
  display: block;
}

The JavaScript script registers a click listener on the slides container. In the click listener, the active slide is retrieved and based on the active slide, the indexes for the next slide are computed.

When the next index is computed, the active class is toggled both on the current and on the next slide, which will exchange the images.

function transition() {

  // select the slides container element
  let slidesElement = document.querySelector('.slides');

  // select the NodeList of all slides
  let slideElementsArray = slidesElement.querySelectorAll('.slide');

  slidesElement.addEventListener('click', () => {
    // select the active slide element
    let activeSlideElement = slidesElement.querySelector('.active');

    // use the prototype as a NodeList has no indexOf() method
    let currentSlideElementIndex = Array.prototype.indexOf.call(slideElementsArray, activeSlideElement);

    // find the next index
    let nextSlideElementIndex = currentSlideElementIndex == slideElementsArray.length-1 ? currentSlideElementIndex : currentSlideElementIndex + 1;

    // retrieve the next div element
    let nextSlideElement = slideElementsArray[nextSlideElementIndex];

    // toggle the active classes to display the next image
    activeSlideElement.classList.toggle('active');
    nextSlideElement.classList.toggle('active');
  })
}

transition();

Leave a Reply