title: created a slider for testimonial, but the width slides horizonal
body: <p>The below code for testimonial slider has created an unwanted horizontal scroll bar due to the the width. If I reduced the width from the CSS file, the other testimonial comes together which I do not wanted, as the bar at the bottom when clicked slides to the testimonial. I think it's the slide-col width that is creating the problem, is there a way I can hide the other testimonial and when I click on the bar, the testimonial appears/slides.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var test__btn = document.getElementsByClassName("test__btn");
  var slide = document.getElementById("slide");
  
  test__btn[0].onclick = function() {
    slide.style.transform = "translateX(0px)";
    for (i = 0; i &lt; 4; i++) {
      test__btn[i].classList.remove("active");
    }
    this.classList.add("active");
  };
  test__btn[1].onclick = function() {
    slide.style.transform = "translateX(-800px)";
    for (i = 0; i &lt; 4; i++) {
      test__btn[i].classList.remove("active");
    }
    this.classList.add("active");
  };
  test__btn[2].onclick = function() {
    slide.style.transform = "translateX(-1600px)";
    for (i = 0; i &lt; 4; i++) {
      test__btn[i].classList.remove("active");
    }
    this.classList.add("active");
  };
  test__btn[3].onclick = function() {
    slide.style.transform = "translateX(-2400px)";
    for (i = 0; i &lt; 4; i++) {
      test__btn[i].classList.remove("active");
    }
    this.classList.add("active");
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*-----Testimonial-------*/
  
  .testimonial-main {
    background: var(--color-primary);
    height: 120vh;
    position: relative;
    margin: 1rem;
    -webkit-box-shadow: 0 2rem 4rem rgba(117, 94, 94, 0.2);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  }
  
  .testimonial-sub {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .testimonial__container {
    width: 800px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15%;
  }
  
  .test__btn {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 4px;
    border-radius: 15px;
    background: var(--color-secondary);
    cursor: pointer;
  }
  
  .active {
    width: 45px;
  }
  
  .slide-row {
    display: flex;
    width: 3200px;
    transition: 0.5s;
  }
  
  .slide-col {
    width: 800px;
    height: 400px;
    position: relative;
  }
  
  .user-img {
    position: absolute;
    top: 0;
    left: 330px;
    height: 100%;
  }
  
  .user-img img {
    height: 30%;
    border-radius: 100%;
  }
  
  .user-text {
    background: #2d3a59;
    width: 250px;
    position: absolute;
    left: 280px;
    top: 220px;
    transform: translateY(-25%);
    border-radius: 10px;
    color: #d3d4d6;
    padding: 10px;
    box-sizing: border-box;
    z-index: 2;
  }
  
  .user-text p {
    font-size: 14px;
    line-height: 24px;
    text-align: center;
  }
  
  .user-text h3 {
    margin: 35px 0 5px;
    color: #fff;
    text-align: center;
  }
  
  
  /* ------testimonial  close-------*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Testimonial--&gt;
  &lt;section id="testimonial"&gt;
    &lt;div&gt;
      &lt;h1 class="heading__h1" data-aos="zoom-in-left"&gt;
        WHAT OUR CUSTOMERS SAY ABOUT US
      &lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="testimonial-main"&gt;
      &lt;div class="testimonial__container"&gt;
        &lt;div class="indicator"&gt;
          &lt;span class="test__btn active"&gt;1&lt;/span&gt;
          &lt;span class="test__btn"&gt;2&lt;/span&gt;
          &lt;span class="test__btn"&gt;3&lt;/span&gt;
          &lt;span class="test__btn"&gt;4&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="testimonial-sub"&gt;
          &lt;div class="slide-row" id="slide"&gt;
            &lt;div class="slide-col"&gt;
              &lt;div class="user-text"&gt;
                &lt;p&gt;
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cupiditate explicabo minima earum recusandae, neque facilis mollitia sunt asperiores eos.
                &lt;/p&gt;
                &lt;h3&gt;Client 1&lt;/h3&gt;
                &lt;p&gt;Company 1 LTD&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="user-img"&gt;
                &lt;img src="https://i.ibb.co/8x9xK4H/team.jpg" alt="" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slide-col"&gt;
              &lt;div class="user-text"&gt;
                &lt;p&gt;
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cupiditate explicabo minima earum recusandae, neque facilis mollitia sunt asperiores eos.
                &lt;/p&gt;
                &lt;h3&gt;Client 2&lt;/h3&gt;
                &lt;p&gt;Company 2 LTD&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="user-img"&gt;
                &lt;img src="https://i.ibb.co/8x9xK4H/team.jpg" alt="" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slide-col"&gt;
              &lt;div class="user-text"&gt;
                &lt;p&gt;
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cupiditate explicabo minima earum recusandae, neque facilis mollitia sunt asperiores eos.
                &lt;/p&gt;
                &lt;h3&gt;Client 3&lt;/h3&gt;
                &lt;p&gt;Company 3 LTD&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="user-img"&gt;
                &lt;img src="https://i.ibb.co/8x9xK4H/team.jpg" alt="" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="slide-col"&gt;
              &lt;div class="user-text"&gt;
                &lt;p&gt;
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore cupiditate explicabo minima earum recusandae, neque facilis mollitia sunt asperiores eos.
                &lt;/p&gt;
                &lt;h3&gt;Client 4&lt;/h3&gt;
                &lt;p&gt;Company 4 LTD&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="user-img"&gt;
                &lt;img src="https://i.ibb.co/8x9xK4H/team.jpg" alt="" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>