用進度條輪播計數

Question

我創建了一個 Bootstrap 5 Carousel，它計算每張幻燈片（永遠只有 4 個）並有一個協調的進度條。

按下下一個按鈕效果很好，但我不知道如何使上一個按鈕工作（倒計時，調整進度條）。

 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>

我不確定如何設置一個等於“clicks”的新變量，它可以減去計數並調整進度條寬度。 我對此很陌生，所以需要任何幫助

Answer 1

您已經掌握了大部分內容，只是忘記添加實際修改 CSS 的邏輯。

我添加了與您發布的相同示例並進行了一些更改，因此它可以雙向 go。

 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>