carousel

custom.js

'use strict'

window.onload = () => {

  const slideShow = document.getElementById('slide-show')
  const div = slideShow.querySelectorAll('div')

  // Set the minimum width (slideshow width) and transition to each div

  let width = slideShow.clientWidth

  for (let i; i < div.length; i++) {
    div[i].style.cssText = `min-width: ${width}px;`
  }

  // Set the height of the slideshow to the height of the first div

  let height = div[0].clientHeight
  slideShow.style.height = `${height}px`

  // Set divs in a row

  let count = 0;

  for (let i = 0; i < div.length; i++) {
    div[i].style.left = `${ (i * width) - ((count) * width)}px`
  }

  // Prev, next buttons

  let prev = document.createElement('a')
  let next = document.createElement('a')
  prev.innerHTML = '< prev'
  next.innerHTML = 'next >'
  prev.classList.add('prev')
  next.classList.add('nxt')
  prev.setAttribute('href', '#')
  next.setAttribute('href', '#')
  slideShow.appendChild(prev)
  slideShow.appendChild(next)

  activeLinks()

  next.addEventListener('click', (e) => {
    e.preventDefault()
    if (count < (div.length - 1)) {
      count += 1;
      for (let i = 0; i < div.length; i++) {
        div[i].style.cssText = `left: ${ (i * width) - ((count) * width)}px; transition: 1s;`
      }
    }
    activeLinks()
  })

  prev.addEventListener('click', (e) => {
    e.preventDefault()
    if (count > 0) {
      count -= 1;
      for (let i = 0; i < div.length; i++) {
        div[i].style.cssText = `left: ${ (i * width) - ((count) * width)}px; transition:1s;`
      }
    }
    activeLinks()
  })

  // Check for prev or next image

  function activeLinks() {
    // Disable prev button if on first slide
    if (count === 0) {
      prev.style.opacity = .5
      prev.removeAttribute('href', '#')
    } else {
      prev.setAttribute('href', '#')
      prev.style.opacity = 1
    }
    // Disable next button if on last slide
    if (count === (div.length - 1)) {
      next.style.opacity = .5
      next.removeAttribute('href', '#')
    } else {
      next.setAttribute('href', '#')
      next.style.opacity = 1
    }
  }

  // Maintain responsive design on window resize

  window.addEventListener('resize', (e) => {
    e.preventDefault
    // Recalculate width
    width = slideShow.clientWidth
    // Resize each div
    for (let i = 0; i < div.length; i++) {
      div[i].cssText = `transition: 1s; min-width: ${width}px`
      // Wait for width before resetting height
      setTimeout(() => {
        height = div[0].clientHeight
        slideShow.style.height = `${height}px`
      }, 1000)
      // Wait for height before resetting width
      setTimeout(() => {
        width = slideShow.clientWidth
        div[1].style.left = `${width}px`
        for (let i = 0; i < div.length; i++) {
          div[i].style.left = `${ (i * width) - ((count) * width)}px`
        }
      }, 1500)
    }
  })

}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Carousel</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header>
    <h1>Carousel</h1>
  </header>
  <div class="wrapper">
    <div class="container">
      <div id="slide-show">
        <div><img src="images/dismemberment.jpg" alt="Dismemberment sculpture"></div>
        <div><img src="images/red-cloud-confrontation-in-landscape.jpg" alt="Red Cloud Confrontation sculpture"></div>
        <div><img src="images/te-tuhirangi-contour.jpg" alt="Te Tuhirangi Contour sculpture"></div>
        <div><img src="images/pyramid.jpg" alt="Pyramid Sculpture"></div>
      </div>
    </div>
    <!-- .container-->
  </div>
  <!-- .wrapper-->
  <footer>
    <small>MIT</small>
  </footer>
  <script src="custom.js"></script>
</body>

</html>

styles.css

body {
  background: #eee;
  font-size: 16px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  margin: 0;
}

a {
  color: crimson;
  text-decoration: none;
}

a:hover {
  color: red;
}


/* Layout
------------------------------------------*/

header,
.container,
footer {
  margin: 0 auto;
  width: 88%;
  max-width: 960px;
}

.wrapper {
  padding: 1em 0;
  background: #fff;
}


/* Slide show
------------------------------------------*/

#slide-show {
  display: flex;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.nxt,
.prev {
  z-index: 100;
  position: absolute;
  bottom: 20px;
}

.prev {
  left: 20px;
}

.nxt {
  right: 20px;
}

#slide-show img {
  max-width: 100%;
  height: auto;
}

#slide-show div {
  width: 100%;
  position: absolute;
}

#slide-show {
  height: 100%;
}