Bootstrap 滑塊/輪播

Question

我想制作一個帶有文本的引導輪播，在這 4 個圓圈的頂部，每次“選擇/懸停”1 個圓圈時，右圓圈和下方的右線顯示。 像這樣的東西：

誰能幫我解決這個問題？

Answer 1

這是您可以查看的普通 JS 輪播，但正如其他人指出的那樣，Stack Overflow 不是為您創建項目的服務。 你需要更多地研究 CSS，這樣你才能讓輪播顯示你想要的樣子。

 //Changed index so 1 is actually first image, rather than starting at 0 index var index = 1; var paused = false; var slideShow = []; for (i=0; i<document.getElementsByClassName("slideShow").length; i++) { slideShow[i] = document.getElementsByClassName("slideShow")[i]; slideShow[i].style.display = "none"; } slideShow[0].style.display = "inline"; var slides = setInterval(function() { if (index < slideShow.length) { index++; showDivs(); } else { index = 1; showDivs(); } },1000); function control(n) { clearInterval(slides); if (index+n > slideShow.length) { index = 1; } else if (index+n <= 0) { index = slideShow.length; } else { index += n; } showDivs(); } function showDivs() { //Hide all slideShow elements, and then show only the targeted element for (let i=1; i<=slideShow.length; i++) { slideShow[i-1].style.display = "none"; } slideShow[index-1].style.display = "inline"; }

 <button onclick="control(-1)" class="arrows" id="left"><</button> <p class="slideShow">1</p> <p class="slideShow">2</p> <p class="slideShow">3</p> <p class="slideShow">4</p> <p class="slideShow">5</p> <button onclick="control(1)" class="arrows" id="right">></button>