Flex Box Image Slider using JavaScript

This JavaScript code snippet helps you to create a flex box image slider. It comes with arrow buttons to navigate the next and previous slide with fading animation.

You just need to place your images inside the slider, then this code snippet automatically renders a flexbox image carousel. You can customize the slider container according to your needs with additional CSS.

How to Create Flex Box Image Slider using JavaScript

1. First of all, load the icons CSS into the head tag of your webpage.

<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>

2. After that, create a div element with a class name “slider” and place your images inside it. Similarly, create nav element with a class name “slider-nav” and place the markup for the next and previous buttons as described below. Wrap all these elements into a div tag and define its class name “container”. The complete HTML structure for the flexbox image slider is as follows:

<div class="container">
  <div class="slider">
    <img class="active" src="https://source.unsplash.com/gKk9rpyDryU">
    <img src="https://source.unsplash.com/VFGEhLznjPU">
    <img src="https://source.unsplash.com/InR-EhiO_js">
  </div>
  <nav class="slider-nav">
    <ul>
      <li class="arrow">
        <button class="previous">
          <span>
            <i class="ion-arrow-left-c"></i>
          </span>
        </button>
      </li>
      <li class="arrow">
        <button class="next">
          <span>
            <i class="ion-arrow-right-c"></i>
          </span>
        </button>
      </li>
    </ul>
  </nav>
</div>

3. After creating the HTML structure, now it’s time to style the image slider. To do so, add the following CSS styles into your project. You can set the custom size for the container and slider according to your needs. Likewise, you can also set the custom values or additional CSS to fully customize it.

* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px;
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 20px 5px;
  color: #3c376f;
  font-size: 2rem;
}

button span {
  position: relative;
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.previous:hover span {
  transform: translateX(-10px) scale(1.2);
}

.next:hover span {
  transform: translateX(10px) scale(1.2);
}

.slider-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.slider-nav li {
  display: flex;
  flex: 2;
  text-align: center;
}

img {
  max-width: 100%;
  display: none;
  box-shadow: 10px 10px 20px 0 rgba(94, 47, 59, 0.2);
}

img.active {
  display: block;
  -webkit-animation: fadeImg 0.8s;
          animation: fadeImg 0.8s;
}

.slider-nav .arrow {
  flex: 0 0 15%;
}

.slider-nav a {
  flex-basis: 100%;
  display: flex;
  align-items: center;
}

.slider-nav span {
  display: block;
  width: 100%;
}

@-webkit-keyframes fadeImg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeImg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

4. In the final step, add the following JavaScript function to activate the flexbox image slider.

const items = document.querySelectorAll('img');
const itemCount = items.length;
const nextItem = document.querySelector('.next');
const previousItem = document.querySelector('.previous');
let count = 0;

function showNextItem() {
  items[count].classList.remove('active');

  if(count < itemCount - 1) {
    count++;
  } else {
    count = 0;
  }

  items[count].classList.add('active');
  console.log(count);
}

function showPreviousItem() {
  items[count].classList.remove('active');

  if(count > 0) {
    count--;
  } else {
    count = itemCount - 1;
  }

  items[count].classList.add('active');
  console.log(count);
}

function keyPress(e) {
  e = e || window.event;
  
  if (e.keyCode == '37') {
    showPreviousItem();
  } else if (e.keyCode == '39') {
    showNextItem();
  }
}

nextItem.addEventListener('click', showNextItem);
previousItem.addEventListener('click', showPreviousItem);
document.addEventListener('keydown', keyPress);

That’s all! hopefully, you have successfully created flex box image slider using JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.