引导轮播按钮不起作用且指示器不显示

Question

我基本上是在尝试使用指标重新创建引导轮播，但在我的代码中我看不到指标，并且上一个/下一个按钮不起作用。 我找到了一个可以在这里调整的替代解决方案，但我想了解我的问题出在哪里，因为它几乎是从 Bootstrap 的网站复制粘贴的。 HTML 和 CSS 下面：

 /* Define our custom colors */:root{ --livingcoral: #FC766AFF; --stormgray: #B0B8B4FF; --forestbiome: #184A45FF; --sagegreen: #567572FF; --marsala: #964F4CFF; --granitegray: #696667FF; --blacksteel: #080706; --paper: #EFEFEF; --goldleaf: #D1B280; --silver: #594D46; } /* Boilerplate CSS for box sizing and body */ * { box-sizing: border-box; } body{ background-color: var(--paper); font-family: Georgia, Times, Courier; color: var(--blacksteel); } /* Top Bar including opacity transition */ #welcome { color: var(--paper); text-align: center; background-color: var(--blacksteel); font-family: Courier, Times, Georgia; transition: opacity 0.5s; cursor: default; /* background-image: url("BlueBuilding.jpg") */ } #welcome:hover{ opacity: 0.7; } /* Top left personal quote, including transition when hovering */ #top-left-motivation{ text-align: left; color: var(--silver); overflow: hidden; cursor: default; }.quote, .text { display: block; overflow: hidden; transition: opacity 0.8s ease-in-out; }.quote{ height: auto; width: auto; opacity: 1; }.text{ height: 0; width: 0; opacity: 0; } #top-left-motivation:hover.quote{ height: 0; width: 0; opacity: 0; } #top-left-motivation:hover.text{ height: auto; width: auto; opacity: 1; font-style: italic; } /* Top right list including link hover effects */ #top-right-list{ text-align: right; font-family: Georgia; }.list-inline-item{ text-align: right; margin-left: 15px; }.info-link{ color: var(--silver); transition: color 0.3s, border 0.3s, padding 0.3s; }.info-link:link { text-decoration: none; }.info-link:visited { text-decoration: none; }.info-link:hover { color: var(--goldleaf); text-decoration: none; cursor: pointer; border-top: 1px solid var(--goldleaf); border-bottom: 1px solid var(--goldleaf); /* background-color: lightskyblue; */ /* border-radius: 2px; */ padding: 4px 5px 5px 5px; }.info-link:active { text-decoration: none; color: brown; } /* personalt statement formatting */ #personal-statement{ text-align: center; font-family: Georgia; /* color: #327c9c; */ } #maincarousel{ margin: 100px 100px 100px 100px; padding: 50px 50px 50px 50px; background-color: var(--silver); border-radius: 5px; color: var(--paper); } /* Special thanks to W3Schools for the timeline tutorial: https://www.w3schools.com/howto/howto_css_timeline.asp */ /* Container around content */.timeline { position: relative; max-width: 1400px; margin: 0 auto; } /* Uncomment if you want the circles on the timeline */.timeline::before { content: ''; position: absolute; width: 20px; height: 20px; background-color: var(--paper); border: 2px solid var(--blacksteel); border-radius: 50%; z-index: 2; left: calc(50% - 7px); top: 0; }.timeline::after { content: ''; position: absolute; width: 6px; background-color: var(--blacksteel); top: 2px; bottom: 0px; left: 50%; }.container-timeline { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; } /* For Javascript to hide/reveal elements on scroll */.container-timeline { visibility: hidden; opacity: 0; transition: all 0.5s ease-in-out; }.container-timeline.show{ transform: none; visibility: visible; opacity: 1; }.left-side { left: 0; }.right-side { left: 50%; text-align: right; } /* Add lines to the left container (pointing right) */.left-side::before { content: " "; height: 2px; position: absolute; top: 30px; width: 40px; z-index: 1; right: 0px; background: var(--blacksteel); } /* Add lines to the right container (pointing left) */.right-side::before { content: " "; height: 2px; position: absolute; top: 30px; width: 40px; z-index: 1; left: 0px; background: var(--blacksteel); } /* Fix the circle for containers on the right side */.right-side::after { left: -9px; } /* The actual content */.content-timeline { padding: 20px 30px; position: relative; border-radius: 6px; border: 1px solid var(--blacksteel); }.left-side.content-timeline { background: linear-gradient(45deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%); }.right-side.content-timeline { background: linear-gradient(225deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%); } /* format the timeline boxes */.timeline-heading{ color: var(--paper); font-family: Courier; }.left-side.timeline-heading{ border-image-slice: 1; border-bottom: 1px solid; border-image-source: linear-gradient(225deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%); }.right-side.timeline-heading{ border-image-slice: 1; border-bottom: 1px solid; border-image-source: linear-gradient(45deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%); }.timeline-text{ color: var(--paper); font-family: Georgia; text-decoration: bold; } /* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 600px) { /* Place the timelime to the left */.timeline::after { left: 25px; }.timeline::before { left: 18px; } /* Full-width containers */.container-timeline { width: 100%; padding-left: 70px; padding-right: 25px; } /* Make sure that all lines are pointing leftwards */.container-timeline::before { left: 30px; } /* Make sure all circles are at the same spot */.left-side::after, .right-side::after { left: 15px; } /* Make all right containers behave like the left ones */.right-side { left: 0%; } }

 <:DOCTYPE html> <html lang="en"> <head> <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> <link href="styles,css" rel="stylesheet"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>work exp.</title> </head> <body class="workexp"> <h1 id="welcome"> Work experience. </h1> <div class="container-fluid" id="head"> <div class="row justify-content-md-center"> <div class="col" id="top-left-motivation"> <span class="quote">Personal Quote.</span> <span class="text">Transition text</span> </div> <div class="col" id="top-right-list"> <ul class="list-inline"> <li class="list-inline-item"><a class="info-link" href="index.html" class="">Home.</a></li> <li class="list-inline-item"><a class="info-link" href="aboutme.html">About me.</a></li> <li class="list-inline-item"><a class="info-link" href="contact.html">Contact.</a></li> </ul> </div> </div> </div> <div id="maincarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#maincarousel" data-slide-to="0" class="active"></li> <li data-target="#maincarousel" data-slide-to="1" class=""></li> <li data-target="#maincarousel" data-slide-to="2" class=""></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active text-center p-4"> <p>lorem ipsum (imagine longer text)</p> </div> <div class="carousel-item text-center p-4"> <p>lorem ipsum v2 (imagine longer text)</p> </div> <div class="carousel-item text-center p-4"> <p>lorem ipsum v2 (imagine longer text)</p> </div> </div> <a class="carousel-control-prev" href="#maincarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only"></span> </a> <a class="carousel-control-next" href="#maincarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only"></span> </a> </div> </body> </html>

还有 JSfiddle 这里https://jsfiddle.net/j9skLwye/2/

任何帮助表示赞赏。

Answer 1

经过一番尝试，我发现将 -bs 属性添加到 data-slide（即 data-bs-slide）解决了这个问题，我的轮播也能正常工作了。

 <div id="maincarousel" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> <li data-bs-target="#maincarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></li> <li data-bs-target="#maincarousel" data-bs-slide-to="1" class=""></li> <li data-bs-target="#maincarousel" data-bs-slide-to="2" class=""></li> </ol> <div class="carousel-inner"> <div class="carousel-item active text-center p-4"> <p>lorem ipsum (imagine longer text)</p> </div> <div class="carousel-item text-center p-4"> <p>lorem ipsum v2 (imagine longer text)</p> </div> <div class="carousel-item text-center p-4"> <p>lorem ipsum v3 (imagine longer text)</p> </div> </div> <a class="carousel-control-prev" href="#maincarousel" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only"></span> </a> <a class="carousel-control-next" href="#maincarousel" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only"></span> </a> </div>