javascript slider progress-bar bootstrap-5 counting

Counting Up with Progress Bar Carousel

I have created a Bootstrap 5 Carousel that counts each slide (there will only ever be 4) and has a coordinating progress bar.

It works great pressing the next button, but I'm at a loss on how to make the previous button work (counts down, adjusts the progress bar).

var clicks = 1;
var number = 0;
var elem = document.getElementById("myBar");
    
function onSelect() {
    clicks -= 1;
} 

function onClick() {
    clicks += 1;
    
    if (clicks === 5) {
        clicks = 1;
    } 
    
    if (clicks === 1) {
        elem.style.width = 25 + '%';
    }
    
    if (clicks === 2) {
        elem.style.width = 50 + '%'; 
    }
    
    if (clicks === 3) {
        elem.style.width = 75 + '%'; 
    }
    
    if (clicks === 4) {
        elem.style.width = 100 + '%'; 
    }
    
    document.getElementById("testimonial-count").innerHTML = clicks;
    
};

/* TESTIMONIAL */

.testimonial {
    margin: 5% auto;
}

.testimonial .block {
    width: 80%;
    margin: 0 auto;
}

.testimonial .block .content {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.testimonial .block .content .box {
    background-color: #EBEBEB;
    padding: 5% 10%;
    z-index: 1;
    position: relative;
    margin-top: 5%;
}

.testimonial .block .content .box h4 {
    font-size: 38px;
    text-transform: uppercase;
    color: #424342;
    font-weight: 600;
    letter-spacing: 4px;
    margin-bottom: 2%;
}

.testimonial .block .content .box p {
    font-style: italic;
    color: #424342;
}

.testimonial .block .content .box p.name {
    font-weight: bold; 
    font-style: normal;
    margin-top: 2%;
}

.testimonial .carousel-control-next, .testimonial .carousel-control-prev {
    width: 5%;
    opacity: 1;
    bottom: 0%;
    height: auto;
    top: unset;
    background-color: black !important;
    cursor: pointer;
}

.testimonial .carousel-control-next {
transform: rotate(180deg);
}

.testimonial .navigation {
    width: 60%;
    margin: 0 auto;
    margin-top: 3%;
}

.testimonial .carousel-control-next-icon {
    transform: rotate(180deg);
}

.testimonial .carousel-control-next {
    right: 13%;
}

.testimonial .carousel-control-prev {
    left: 13%;
}

.testimonial .numbers {
    font-family: 'Tungsten', Arial, sans-serif !important;
    font-size: 4.5vw;
    color: #424342;
    line-height: 4vw;
    width: 10%;
    display: inline-block;
    vertical-align: middle;
}

.testimonial .numbers span {
    font-weight: bold;
    color: #F04036;
}

.testimonial #myProgress {
    width: 89%;
    background-color: #ddd;
    display: inline-block;
    vertical-align: middle;
}

.testimonial #myBar {
    width: 25%;
    height: 5px;
    background-color: #f04037;
    text-align: center;
    line-height: 30px;
    color: white;
    transition: .5s;
}

.testimonial .hidden {
  display: none;
}

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="testimonial iksn068ezpj1">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
        <div class="carousel-inner">
                            <div class="carousel-item">
                    <div class="block aos-init aos-animate" data-aos="fade-down">
                        <div class="content">
                            <div class="box">
                                <h4>Worked well together</h4>
                                <p>Quisque ut dolor gravida, placerat libero vel, euismod. Nec dubitamus multa iter quae et nos invenerat. Phasellus laoreet lorem vel dolor tempus vehicula.</p>                                <p class="name">Test McTestFace</p>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="carousel-item active">
                    <div class="block aos-init aos-animate" data-aos="fade-down">
                        <div class="content">
                            <div class="box">
                                <h4>Do you wanna build a snowman?</h4>
                                <p>Quisque ut dolor gravida, placerat libero vel, euismod. Nec dubitamus multa iter quae et nos invenerat. Phasellus laoreet lorem vel dolor tempus vehicula.</p>                                <p class="name">Test McTestFace</p>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="carousel-item">
                    <div class="block aos-init aos-animate" data-aos="fade-down">
                        <div class="content">
                            <div class="box">
                                <h4>I felt the rain down in Africa</h4>
                                <p>Quisque ut dolor gravida, placerat libero vel, euismod. Nec dubitamus multa iter quae et nos invenerat. Phasellus laoreet lorem vel dolor tempus vehicula.</p>                                <p class="name">Toto</p>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="carousel-item">
                    <div class="block aos-init aos-animate" data-aos="fade-down">
                        <div class="content">
                            <div class="box">
                                <h4>I can feel it calling in the air...</h4>
                                <p>Quisque ut dolor gravida, placerat libero vel, euismod. Nec dubitamus multa iter quae et nos invenerat. Phasellus laoreet lorem vel dolor tempus vehicula.</p>                                <p class="name">Phil Collins</p>
                            </div>
                        </div>
                    </div>
                </div>
                    </div>
        <div class="navigation">
            <button class="carousel-control-prev" type="button" onclick="onSelect()" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" onclick="onClick()" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
            <div class="numbers">
                <span id="testimonial-count">1</span> / 4
            </div>
            <div id="myProgress">
                <div id="myBar"></div>
            </div>
        </div>
    </div>
</div>

I'm not sure how to set a new variable that is equal to "clicks" that can subtract the counting and adjust the progress bar width. I'm VERY new to this so any help is need!

Solution

You already got most of it, you just forgot to add the logic that actually modifies the CSS.

I've added the same example you posted with a couple of changes so it can go both directions.

var clicks = 1;
var number = 0;
var elem = document.getElementById("myBar");

function previousStep() {
  clicks -= 1;
  if (clicks === 0) {
    clicks = 4;
  }
  displayProgress();
}

function nextStep() {
  clicks += 1;
  if (clicks === 5) {
    clicks = 1;
  }
  displayProgress();
};


function displayProgress() {
  if (clicks === 1) {
    elem.style.width = 25 + '%';
  }

  if (clicks === 2) {
    elem.style.width = 50 + '%';
  }

  if (clicks === 3) {
    elem.style.width = 75 + '%';
  }

  if (clicks === 4) {
    elem.style.width = 100 + '%';
  }

  document.getElementById("testimonial-count").innerHTML = clicks;
}

/* TESTIMONIAL */

.testimonial {
  margin: 5% auto;
}

.testimonial .block {
  width: 80%;
  margin: 0 auto;
}

.testimonial .block .content {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.testimonial .block .content .box {
  background-color: #EBEBEB;
  padding: 5% 10%;
  z-index: 1;
  position: relative;
  margin-top: 5%;
}

.testimonial .block .content .box h4 {
  font-size: 38px;
  text-transform: uppercase;
  color: #424342;
  font-weight: 600;
  letter-spacing: 4px;
  margin-bottom: 2%;
}

.testimonial .block .content .box p {
  font-style: italic;
  color: #424342;
}

.testimonial .block .content .box p.name {
  font-weight: bold;
  font-style: normal;
  margin-top: 2%;
}

.testimonial .carousel-control-next,
.testimonial .carousel-control-prev {
  width: 5%;
  opacity: 1;
  bottom: 0%;
  height: auto;
  top: unset;
  background-color: black !important;
  cursor: pointer;
}

.testimonial .carousel-control-next {
  transform: rotate(180deg);
}

.testimonial .navigation {
  width: 60%;
  margin: 0 auto;
  margin-top: 3%;
}

.testimonial .carousel-control-next-icon {
  transform: rotate(180deg);
}

.testimonial .carousel-control-next {
  right: 13%;
}

.testimonial .carousel-control-prev {
  left: 13%;
}

.testimonial .numbers {
  font-family: 'Tungsten', Arial, sans-serif !important;
  font-size: 4.5vw;
  color: #424342;
  line-height: 4vw;
  width: 10%;
  display: inline-block;
  vertical-align: middle;
}

.testimonial .numbers span {
  font-weight: bold;
  color: #F04036;
}

.testimonial #myProgress {
  width: 89%;
  background-color: #ddd;
  display: inline-block;
  vertical-align: middle;
}

.testimonial #myBar {
  width: 25%;
  height: 5px;
  background-color: #f04037;
  text-align: center;
  line-height: 30px;
  color: white;
  transition: .5s;
}

.testimonial .hidden {
  display: none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="testimonial iksn068ezpj1">
  <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
    <div class="carousel-inner">
      <div class="carousel-item">
        <div class="block aos-init aos-animate" data-aos="fade-down">
          <div class="content">
            <div class="box">
              <h4>Worked well together</h4>
              <p>Quisque ut dolor gravida, placerat libero vel, euismod. Nec dubitamus multa iter quae et nos invenerat. Phasellus laoreet lorem vel dolor tempus vehicula.</p>
              <p class="name">Test McTestFace</p>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item active">
        <div class="block aos-init aos-animate" data-aos="fade-down">
          <div class="content">
            <div class="box">
              <h4>Do you wanna build a snowman?</h4>
              <p>Quisque ut dolor gravida, placerat libero vel, euismod. Nec dubitamus multa iter quae et nos invenerat. Phasellus laoreet lorem vel dolor tempus vehicula.</p>
              <p class="name">Test McTestFace</p>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="block aos-init aos-animate" data-aos="fade-down">
          <div class="content">
            <div class="box">
              <h4>I felt the rain down in Africa</h4>
              <p>Quisque ut dolor gravida, placerat libero vel, euismod. Nec dubitamus multa iter quae et nos invenerat. Phasellus laoreet lorem vel dolor tempus vehicula.</p>
              <p class="name">Toto</p>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="block aos-init aos-animate" data-aos="fade-down">
          <div class="content">
            <div class="box">
              <h4>I can feel it calling in the air...</h4>
              <p>Quisque ut dolor gravida, placerat libero vel, euismod. Nec dubitamus multa iter quae et nos invenerat. Phasellus laoreet lorem vel dolor tempus vehicula.</p>
              <p class="name">Phil Collins</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="navigation">
      <button class="carousel-control-prev" type="button" onclick="previousStep()" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
      <button class="carousel-control-next" type="button" onclick="nextStep()" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
      <div class="numbers">
        <span id="testimonial-count">1</span> / 4
      </div>
      <div id="myProgress">
        <div id="myBar"></div>
      </div>
    </div>
  </div>
</div>