I am making a website using bootstrap, and it seems the carousel is not working, I copied the code directly from their page and it still won't work.
I don't see the indicators, nor do I see it moving (I have 3 slides of content).
This is all I see:
<!DOCTYPE html>
<html>
<head>
<title>realatte task</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div >
<div id="carouselIndicators" data-ride="carousel">
<ol >
<li data-target="#carouselIndicators" data-slide-to="0" ></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
</ol>
<div >
<div >
<img src="testimonial.png" alt="First slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p >-Segero, NoranicMeds</p>
</div>
<div >
<img src="testimonial.png" alt="Second slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p >-Segero, NoranicMeds</p>
</div>
<div >
<img src="testimonial.png" alt="Third slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p >-Segero, NoranicMeds</p>
</div>
<a href="#carouselExampleIndicators" role="button" data-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</a>
<a href="#carouselExampleIndicators" role="button" data-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</a>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
Try using this
<!doctype html>
<html>
<head>
<title>realatte task</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div >
<div id="carouselExampleDark" data-bs-ride="carousel">
<div >
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div >
<div data-bs-interval="10000">
<img src="testimonial.png" alt="First slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p >-Segero, NoranicMeds</p>
</div>
<div data-bs-interval="2000">
<img src="testimonial.png" alt="Second slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p >-Segero, NoranicMeds</p>
</div>
<div >
<img src="testimonial.png" alt="Second slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p >-Segero, NoranicMeds</p>
</div>
</div>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</body>
</html>CodePudding user response：
Add these bootstrap links on the header
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
And the data-target is 'data-target="#carouselIndicators". Same target you have to use on the Prev & Next Buttons
<a href="#carouselIndicators" role="button" data-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</a>
<a href="#carouselIndicators" role="button" data-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</a>
<!DOCTYPE html>
<html>
<head>
<title>realatte task</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
<!-- JavaScript Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div >
<div id="carouselIndicators" data-ride="carousel">
<ol >
<li data-target="#carouselIndicators" data-slide-to="0" ></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
</ol>
<div >
<div >
<img src="https://www.ispydesign.com.au/wp-content/uploads/2014/04/bokeh-cover-bg.jpg" alt="First slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p >-Segero, NoranicMeds</p>
</div>
<div >
<img src="https://www.ispydesign.com.au/wp-content/uploads/2014/04/bokeh-cover-bg.jpg" alt="Second slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p >-Segero, NoranicMeds</p>
</div>
<div >
<img src="https://www.ispydesign.com.au/wp-content/uploads/2014/04/bokeh-cover-bg.jpg" alt="Third slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p >-Segero, NoranicMeds</p>
</div>
<a href="#carouselIndicators" role="button" data-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</a>
<a href="#carouselIndicators" role="button" data-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</a>
</div>
</div>
</div>
</body>
</html>