'Separate multiple sliders in js

I'm making a page for my silly little website that showed two sliders, but I can't use the second one.

Each sliders have 3 images, so when there's no more images in the first slider, it shows a blank image and instead the image on the second slider starts to change. And the buttons on the second slider don't work at all (I suck at describing things so I hope the code below works).

I figure it's because my code thinks the images belong to one table. So how do I separate the two?

Sorry if the question is too basic I'm still new to all this!

const items = document.querySelectorAll('.inside'); 
const nbSlide = items.length;
const next = document.getElementById('btnRight');
const prev = document.getElementById('btnLeft');

let counter = 0;
console.log(items);

function nextSlide() {
    items[counter].classList.remove('active');

    if (counter < nbSlide - 1) {
        counter++;
    } else {
        counter = 0;
    }

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

}

function prevSlide() {
    items[counter].classList.remove('active');

    if (counter > 0) {
        counter--;
    } else {
        counter = nbSlide - 1;
    }

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

}
next.addEventListener('click', nextSlide);
prev.addEventListener('click', prevSlide);

*, ::before ::after {
    margin: 0%;
    padding: 0%;
}

.container {
    margin: 10%;
    height: auto;
}

.images {
    float: left;
    width: 60%;
    height: 200px;
    padding-top: 5%;
    border-radius: 25px;
    background-color: #ebe9ea;
    text-align: center;
}

.descriptions {
    margin-top: 10%;
    float: right;
    width: 35%;
    border-radius: 25px;
    height: 150px;
    background-color: #ebe9ea;
    text-align: center;
}

.descriptions p {
    font-family: 'VT323', monospace;
    font-size: 15px;
    padding-top: 15%;
}

.inside {
    display: none;
}

.inside img {
    height: 100px;
    width:auto;
    margin-left: auto;
    margin-right: auto;
}

.inside p{
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    line-height: 0px;
    font-family: 'VT323', monospace;
}

.inside.active {
    display:block;
    animation: fade 0.8s;
}

.buttons {
    justify-content: center;
    display: flex;
    cursor: pointer;
}

.btn-nav {
    font-size: 50px;
    font-weight: 300;
}

@keyframes fade {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>COMMISSIONS</title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> 
    <link href="commStyle.css" rel="stylesheet" type="text/css">
  </head>
  <body>
      <div class="container">
        <div class="images">
            <div class="slider">
              <div class="inside active"> <!--artinya two classes, inside and active-->
                <img src="https://pbs.twimg.com/media/FRWeDZ5X0AMqDpX?format=jpg&name=small"><p>SKETCH</p>
                
              </div>
              <div class="inside">
                <img src="https://pbs.twimg.com/media/FQ91iagXoAEkWD6?format=png&name=360x360"><p>FLAT</p>
                
              </div>
              <div class="inside">
                <img src="https://pbs.twimg.com/media/FRSQbO-XMAA3yDd?format=jpg&name=medium"><p>RENDERED</p>
                
              </div>
            </div>

            <div class="buttons">
                <div class="btn-nav" id="btnLeft">←</div>
                <div class="btn-nav" id="btnRight">→</div>
            </div>
          </div>

          <div class="descriptions">
            <p><u>BUST</u><br>
                SKETCH - 6€<br>
                FLAT COLOR - 15€<br>
                RENDERED - 21€</p>
          </div>
      </div>
      
      <div style="padding: 100px;"></div>

      <div class="container">
        <div class="images">
            <div class="slider">
              <div class="inside active"> <!--artinya two classes, inside and active-->
                <img src="https://pbs.twimg.com/media/FRWeDZ5X0AMqDpX?format=jpg&name=small"><p>SKETCH</p>
                
              </div>
              <div class="inside">
                <img src="https://pbs.twimg.com/media/FQ91iagXoAEkWD6?format=png&name=360x360"><p>FLAT</p>
                
              </div>
              <div class="inside">
                <img src="https://pbs.twimg.com/media/FRSQbO-XMAA3yDd?format=jpg&name=medium"><p>RENDERED</p>
                
              </div>
            </div>

            <div class="buttons">
                <div class="btn-nav" id="btnLeft">←</div>
                <div class="btn-nav" id="btnRight">→</div>
            </div>
          </div>

          <div class="descriptions">
            <p><u>HALF BODY</u><br>
                SKETCH - 12€<br>
                FLAT COLOR - 21€<br>
                RENDERED - 30€</p>
          </div>
      </div>
      <script type='text/javascript' src="comms.js"></script>
  </body>
</html>

javascript html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Separate multiple sliders in js

Sources

Related Questions