Issue
My carousel is having some issues. It's taking a lot of time to go to the next slide. When I do it with controls, no matter how much I click on the controls, they don't work. I followed everything in the Bootstrap document but it's not working.
Code
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/wonyoung.jpg" class="d-block w-100" alt="loading">
</div>
<div class="carousel-item">
<img src="images/seungyoun.jpg" class="d-block w-100" alt="loading">
</div>
<div class="carousel-item">
<img src="images/yuri.jpg" class="d-block w-100" alt="loading">
</div>
</div>
<button class="carousel-control-prev" type="button" 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" 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>
Solution
Here's the code I used to get the carousel to work, pasting the whole .html file with bootstrap imports of CSS & JS. It should work locally if you copy/paste into a .html file and open it with a web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Bootstrap Carousel Example</title>
</head>
<body>
<div>
<div
id="carouselExampleIndicators"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBsbCAQtQimp5yI0Zx4vyR_FzPLUVzkdjDBN0N4_LAUo59inNQrSp6-Iz7qrfAXBENLGI&usqp=CAU"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRabXZSwdR-7wsXfdtb2Xdy0Tl9o6l1D-UcQnyVN0WxQ9TmPE8SkEh0s9opAyZy-x5DnYY&usqp=CAU"
class="d-block w-100"
alt="..."
/>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleIndicators"
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"
data-bs-target="#carouselExampleIndicators"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
Answered By - akds
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.