huffmanks/slider.html

## slider.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider Demo</title>
    <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {
          min-height: 100vh;
          display: grid;
          place-items: center;
          background-color: #222;
          color: #fefefe;
          font-family: Arial, Helvetica, sans-serif;
      }

      main {
          width: min(1200px, 100%);
          background-color: #444;
      }

      .slider-wrapper {
          position: relative;
          padding: 6rem;
          border: 1px solid red;
      }

      .slider {
          width: 100%;
          overflow: hidden;
      }

      .slider-controls .btn {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
      }

      .btn {
          padding: 0.5rem 0.75rem;
          background-color: rebeccapurple;
          color: #fff;
          border: none;
          border-radius: 0.5rem;
          outline: none;
          cursor: pointer;
          transition: all 0.3s ease-in-out;
      }

      .btn:hover,
      .btn:focus {
          background-color: #9153cf;
      }

      .btn-prev {
          left: 1rem;
      }

      .btn-next {
          right: 1rem;
      }

      .slides {
          display: flex;
          align-items: center;
          gap: 1rem;
          border: 1px solid red;
      }

      .slide {
          flex: 0 0 33.33%;
          border: 1px solid red;
      }

      .slide-title {
          margin-bottom: 0.5rem;
          font-size: 20px;
          font-weight: bold;
          letter-spacing: 2px;
      }

      .slide-content {
          font-size: 14px;
          color: #eee;
      }
    </style>
</head>

<body>
    <main>
        <div class="slider-wrapper">
            <div class="slider" data-slider>
                <div class="slider-controls">
                    <button class="btn btn-prev" data-btn-prev>&larr; Prev</button>
                    <button class="btn btn-next" data-btn-next>Next &rarr;</button>
                </div>
                <div class="slides">
                    <div class="slide" data-slide>
                        <div class="slide-title">Title #1</div>
                        <div class="slide-content">Lorem ipsum dolor sit amet.</div>
                    </div>
                    <div class="slide" data-slide>
                        <div class="slide-title">Title #2</div>
                        <div class="slide-content">Enim, libero voluptatum.</div>
                    </div>
                    <div class="slide" data-slide>
                        <div class="slide-title">Title #3</div>
                        <div class="slide-content">Tempora, placeat.</div>
                    </div>
                    <div class="slide" data-slide>
                        <div class="slide-title">Title #4</div>
                        <div class="slide-content">Voluptatum rerum amet sed minima.</div>
                    </div>
                    <div class="slide" data-slide>
                        <div class="slide-title">Title #5</div>
                        <div class="slide-content">Dicta sit optio quos.</div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>
      const slider = document.querySelector('.slider[data-slider] .slides')

      const prevBtn = document.querySelector('.btn[data-btn-prev]')
      const nextBtn = document.querySelector('.btn[data-btn-next]')

      const rotateSlides = (direction) => {
          const timer = 500
          const slides = document.querySelectorAll('.slide[data-slide]')

          const slideIndex = direction == 'prev' ? slides.length - 1 : 0
          const currentSlide = slides[slideIndex]

          const slide = currentSlide.cloneNode(true)

          if (direction === 'prev') {
              slider.prepend(slide)
          } else {
              slider.append(slide)
          }

          const slideWidth = currentSlide.offsetWidth
          currentSlide.remove()

          const updatedSlides = document.querySelectorAll('.slide[data-slide]')

          updatedSlides.forEach((item) => {
              item.animate(
                  [
                      { opacity: '0', transform: `translateX(${direction === 'prev' ? '-' : ''}${slideWidth}px)` },
                      { opacity: '1', transform: 'translateX(0)' },
                  ],
                  {
                      duration: timer,
                      easing: 'ease-in-out',
                  }
              )
          })
      }

      prevBtn.addEventListener('click', (e) => rotateSlides('prev'))
      nextBtn.addEventListener('click', (e) => rotateSlides('next'))
    </script>
</body>

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

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Slider Demo</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	background-color: #222;
	color: #fefefe;
	font-family: Arial, Helvetica, sans-serif;
	}

	main {
	width: min(1200px, 100%);
	background-color: #444;
	}

	.slider-wrapper {
	position: relative;
	padding: 6rem;
	border: 1px solid red;
	}

	.slider {
	width: 100%;
	overflow: hidden;
	}

	.slider-controls .btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	}

	.btn {
	padding: 0.5rem 0.75rem;
	background-color: rebeccapurple;
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	outline: none;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	}

	.btn:hover,
	.btn:focus {
	background-color: #9153cf;
	}

	.btn-prev {
	left: 1rem;
	}

	.btn-next {
	right: 1rem;
	}

	.slides {
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid red;
	}

	.slide {
	flex: 0 0 33.33%;
	border: 1px solid red;
	}

	.slide-title {
	margin-bottom: 0.5rem;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	}

	.slide-content {
	font-size: 14px;
	color: #eee;
	}
	</style>
	</head>

	<body>
	<main>
	<div class="slider-wrapper">
	<div class="slider" data-slider>
	<div class="slider-controls">
	<button class="btn btn-prev" data-btn-prev>← Prev</button>
	<button class="btn btn-next" data-btn-next>Next →</button>
	</div>
	<div class="slides">
	<div class="slide" data-slide>
	<div class="slide-title">Title #1</div>
	<div class="slide-content">Lorem ipsum dolor sit amet.</div>
	</div>
	<div class="slide" data-slide>
	<div class="slide-title">Title #2</div>
	<div class="slide-content">Enim, libero voluptatum.</div>
	</div>
	<div class="slide" data-slide>
	<div class="slide-title">Title #3</div>
	<div class="slide-content">Tempora, placeat.</div>
	</div>
	<div class="slide" data-slide>
	<div class="slide-title">Title #4</div>
	<div class="slide-content">Voluptatum rerum amet sed minima.</div>
	</div>
	<div class="slide" data-slide>
	<div class="slide-title">Title #5</div>
	<div class="slide-content">Dicta sit optio quos.</div>
	</div>
	</div>
	</div>
	</div>
	</main>
	<script>
	const slider = document.querySelector('.slider[data-slider] .slides')

	const prevBtn = document.querySelector('.btn[data-btn-prev]')
	const nextBtn = document.querySelector('.btn[data-btn-next]')

	const rotateSlides = (direction) => {
	const timer = 500
	const slides = document.querySelectorAll('.slide[data-slide]')

	const slideIndex = direction == 'prev' ? slides.length - 1 : 0
	const currentSlide = slides[slideIndex]

	const slide = currentSlide.cloneNode(true)

	if (direction === 'prev') {
	slider.prepend(slide)
	} else {
	slider.append(slide)
	}

	const slideWidth = currentSlide.offsetWidth
	currentSlide.remove()

	const updatedSlides = document.querySelectorAll('.slide[data-slide]')

	updatedSlides.forEach((item) => {
	item.animate(
	[
	{ opacity: '0', transform: `translateX(${direction === 'prev' ? '-' : ''}${slideWidth}px)` },
	{ opacity: '1', transform: 'translateX(0)' },
	],
	{
	duration: timer,
	easing: 'ease-in-out',
	}
	)
	})
	}

	prevBtn.addEventListener('click', (e) => rotateSlides('prev'))
	nextBtn.addEventListener('click', (e) => rotateSlides('next'))
	</script>
	</body>

	</html>