<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flexbox Javascript Image Carousel</title>
    <link rel="stylesheet" href="image-slider.css">
</head>
<body>
    <div class="plant-carousel">
        <div class="slide fade">
            <img class="plant-1" src="https://images.unsplash.com/photo-1519162808019-7de1683fa2ad" alt="">
            <div class="plant-caption">
                <h1>avocado</h1>
            </div>
        </div>
        <div class="slide fade">
            <img class="plant-2" src="https://images.unsplash.com/photo-1531730802399-67fca7529b13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80g" alt="">
            <div class="plant-caption">
                <h1>tomato</h1>
            </div>
        </div>
        <div class="slide fade">
            <img class="plant-3" src="https://images.pexels.com/photos/51312/kiwi-fruit-vitamins-healthy-eating-51312.jpeg" alt="">
            <div class="plant-caption">
                <h1>kiwi</h1>
            </div>
        </div>
        <a class="prev" onclick="nextSlide(-1)"></a>
        <a class="next" onclick="nextSlide(1)"></a>
        <br>
        <div class="dot-container">
            <span class="dot" onclick="currentSlide(1)"></span> 
            <span class="dot" onclick="currentSlide(2)"></span> 
            <span class="dot" onclick="currentSlide(3)"></span> 
        </div>
    </div>
</body>
<script src="image-slider.js"></script>
</html>
html, body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    width: 100%;
    height: 100%;
    background: black;
}

.slide {
    display: none;
}

.plant-caption {
    display: flex;
    flex-basis: column wrap;
    position: absolute;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    height: 100%;
    width: 100%;
    text-align: center;
    color: white;
    text-shadow: .15em .15em 0em black;
}

.plant-carousel {
    position: relative;
    display: flex;
    flex-basis: row wrap;
    align-items: center; 
    width: 100%;
    height: 50%;
    min-height: 20em;
    overflow: hidden;
}

.plant-1, .plant-2, .plant-3 {
    width: 100%;
    height: 30em; 
    background-attachment: fixed;
    background-position: center center;
    object-fit: cover;
}

.prev, .next {
    position: absolute;
    display: flex;
    flex-direction: row;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
}

.next {
    right: 20px;
    border-bottom: 6px solid #66aa77;
    border-right: 6px solid #66aa77;
    transform: rotate(-45deg);
    transition: right 0.5s;
}

.prev {
    left: 20px;
    border-bottom: 6px solid #66aa77;
    border-left: 6px solid #66aa77;
    transform: rotate(45deg);
    transition: left 0.5s;
}

.next:hover {
    right: 1em;
}

.prev:hover {
    left: 1em;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: blueviolet;
    border-radius: 50%;
    margin: 0 4px;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s;
}
  
.dot-container{
    display: flex;
    flex-basis: row wrap;
    position: absolute;
    justify-content: center;
    width: 100%;
    bottom: 1.5em;
}

.active, .dot:hover {
    opacity: 1;
}

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
   
@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}
var slideIndex = 1;
showSlides(slideIndex);

function nextSlide(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
      slideIndex = 1
    }    
  if (n < 1) {
      slideIndex = slides.length
    }
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "flex";  
  dots[slideIndex-1].className += " active";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.