JSFiddle - React, Tailwind, and code Playground

by dav sev

HTML

<ul class="slider">
        <li class="slide current">
            <div class="one">A1</div>
            <div class="two">A2</div>
            <div class="three">A3</div>
        </li>
        <li class="slide">
            <div class="one">B1</div>
            <div class="two">B2</div>
            <div class="three">B3</div>

        </li>
        <li class="slide">
            <div class="one">C1</div>
            <div class="two">C2</div>
            <div class="three">C3</div>
        </li>
    </ul>

<nav>
  <ul>
    <li><a class="sub-nav__list-item" href="">1</a></li>
    <li><a class="sub-nav__list-item" href="">2</a></li>
    <li><a class="sub-nav__list-item" href="">3</a></li>
  </ul>
</nav>
    <div id="buttons">
        <button id="next"><i class="fas fa-arrow-right"></i></button>
        <button id="prev"><i class="fas fa-arrow-left"></i></button>
    </div>

SCSS

*{
    padding: 0px;
    margin: 0px;
    direction: rtl;
    box-sizing: border-box;
}

.slider{
    position: relative;
    width: 100vw;
    height: 100vh;    
    overflow: hidden;

    .slide {
        display: grid;
        grid-template: 85vh 15vh / 75vw 25vw;
        position: absolute;
        top: 0;
        right: 0;  
       
        &.z-index {
          z-index: 1;
        }
        &.current{
            
            .one{
                opacity: 1;
                transition: opacity 0.7s ease-in-out;
            }

            .two{
                transform: translateX(25vw);
                transition: all 0.7s ease-in-out;

            }
            .three{
                transform: translateY(-15vh);
                transition: all 0.7s ease-in-out;

            }

        }
    }
}
.one{
    position: relative;
    opacity: 0;
    grid-row: 1 / -1;
}

.two{
    position: relative;
    background-color: blue;
    left: -25vw;
}

.three{
    position: relative;
    background-color: green;
    bottom: -15vh;
  
}




.slide:first-child > .one, 
.slide:first-child > .two,
.slide:first-child > .three {
    background: url("https://images.pexels.com/photos/6300000/pexels-photo-6300000.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") no-repeat center center/cover;
}
.slide:nth-child(2) > .one,
.slide:nth-child(2) > .two,
.slide:nth-child(2) > .three {
    background: url("https://images.pexels.com/photos/2774306/pexels-photo-2774306.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") no-repeat center center/cover;
}
.slide:nth-child(3) > .one,
.slide:nth-child(3) > .two,
.slide:nth-child(3) > .three {
    background: url("https://images.pexels.com/photos/4317107/pexels-photo-4317107.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") no-repeat center center/cover;
}

nav {
  ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
}

JavaScript

const buttons = document.querySelectorAll('.sub-nav__list-item');
const slides = document.querySelectorAll('.slide');
const intervalTime = 3000;
let slideInterval;

const currentSlide = (slideNum) => {

  switch (slideNum) {
    case ( slideNum == null):
        slideNum = 0;
        break;
      case(slideNum >= 0 && slideNum < slides.lengh):
        console.log(slideNum);
        break;
  }
const current = document.querySelector('.current');

	current.classList.remove('current')

  slides[slideNum].classList.add('current')
}

for (let i = 0; i < slides.length; i++) {
  buttons[i].addEventListener('click', () => {
    console.log('current button', i)

    currentSlide(i);
  });
}