My Bootstrap Carousel Slide seems not working even though i tried other Answers here (one of them is this.
But almost all of them aren't working and outdated, even though the it solve most of others problems (which seems doesn't work on me)
Most of the code come from Bootstrap Snippet pack from Visual Studio 2017 (Extension)
<!-- Image Slider w/ Captions -->
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="#my-carousel" class="item active">
<img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="#my-carousel" class="item">
<img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div id="#my-carousel" class="item">
<img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="js/animations.js"></script>
JS: (Copied the code here)
$(document).ready(function () {
console.log("Main Content finished loading!");
});
$("#myCarousel .slider-pager a").click(function (e) {
var index = $(this).index();
slider.carousel(index);
e.preventDefault();
});
I also tried other's code in some websites and i can't seem to find the answer or solution to my problem.
I got your code to work as is by fiddling with the bootstrap dependencies.
The code you posted did not have bootstrap css. Not sure if you missed it in your own project, but I added a link to the CDN.
The link to bootstrap js seemed to be throwing an error (looking for a Popper object?). I switched from the beta to the stable release of bootstrap and it worked.
I entirely left out your custom jquery: the bootstrap css can use the html markup to know when to slide next, slide prev, etc.
A last note: I did not change it, but why does every item have id="#my-carousel"? I think only the outer div (with class carousel) needs id="my-carousel" (no hash symbol), and the rest could be removed.
<!-- Image Slider w/ Captions -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="#my-carousel" class="item active">
<img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="#my-carousel" class="item">
<img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div id="#my-carousel" class="item">
<img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Your markup has several errors. The Bootstrap CSS CDN link is missing. Every slide in your markup has an ID id="#my-carousel". ID's have to be unique.
Here two working examples of Bootstrap sliders. One using data attributes and one using a JavaScript init and external controls.
var sliderTwo = $('#carouselExampleIndicators2').carousel({
/* your options for slider #2 */
})
$(".slider-pager li").click(function (e) {
var index = $(this).data('slide');
sliderTwo.carousel(index);
e.preventDefault();
});
.slider-pager {
list-style-type: none;
margin: 0;
padding: 0;
}
.slider-pager li {
background-color: #333;
color: #FFF;
padding: 1em;
margin: 0 0 1em 0;
cursor: pointer;
text-align: center;
border-radius: 4px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="container">
<h2>Slider via data attributes</h2>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- Your controls -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!-- Your slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=First+slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=Second+slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=Third+slide" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<hr>
<div class="container">
<h2>Slider via JavaScript,<br>external controls</h2>
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<!-- Your slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/1200x675/FF851B/FFFFFF&text=First+slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/1200x675/0074D9/FFFFFF&text=Second+slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/1200x675/F012BE/FFFFFF&text=Third+slide" alt="Third slide">
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<ul class="slider-pager">
<li data-slide="0" class="active">First slide</li>
<li data-slide="1">Second slide</li>
<li data-slide="2">Third slide</li>
</ul>
</div>
Related
I'm trying to implement a Bootstrap Carousel into my website however I am having an issue with it where it will only move once and will become unresponsive. I've checked the ordering of the files and that doesn't seem to be an issue. So this has left me stumped on what is causing my issue.
HTML:
<div class="container bg-secondary" id="projectContainer">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="styles\media\gazeteerScreenShot.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerInfoScreenShot.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerMarkerScreenShot.png" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerWebcamScreenShot.png" alt="Fourth slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev" onclick="$('.carousel').carousel('prev')">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next" onclick="$('.carousel').carousel('next')">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
How my JS files are ordered:
<!-- jQuery Required File -->
<script type="text/javascript" src="libs\jQuery\jquery-3.6.0.min.js"></script>
<!-- The Main Javascript file, this contains all our jQuery and PHP -->
<script type="text/javascript" src="libs/js/script.js"></script>
<!-- Bootstrap JS -->
<script type="text/javascript" src="bootstrap-5.1.3-dist\js\bootstrap.bundle.min.js"></script>
Javascript/jQuery:
$(document).ready(function() {
$('.carousel').carousel({
ride: "true",
interval: 1000
});
});
$(document).ready(function() {
$('.carousel').carousel({
ride: "true",
interval: 1000
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container bg-secondary" id="projectContainer">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="styles\media\gazeteerScreenShot.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerInfoScreenShot.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerMarkerScreenShot.png" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="styles\media\gazeteerWebcamScreenShot.png" alt="Fourth slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev" onclick="$('.carousel').carousel('prev')">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next" onclick="$('.carousel').carousel('next')">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
How my JS files are ordered:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>
The primary problem is that you were one indicator short. The script was erroring when it tried to find the last one.
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at st._setActiveIndicatorElement (carousel.js:364)
at st._slide (carousel.js:435)
at st.next (carousel.js:142)
at Function.carouselInterface (carousel.js:526)
at HTMLDivElement.<anonymous> (carousel.js:535)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at S.fn.init.jQueryInterface [as carousel] (carousel.js:534)
at HTMLAnchorElement.onclick (js:37)
You seem to be missing -bs in your data attributes. See the docs.
Also, no Bootstrap library is going to call for onclick attributes in the markup. That's what the data attributes do.
$(document).ready(function() {
$('.carousel').carousel({
ride: "true",
interval: 1000
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container bg-secondary" id="projectContainer">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="Fourth slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>
I've been researching for over an hour and I cannot get this example code from the Bootstrap website for a Carousel working... the only thing I changed are the image sources. What am I doing wrong? If it helps, this will be in a component in an Angular project.
<div id="ourCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#ourCarousel" data-slide-to="0" class="active"></li>
<li data-target="#ourCarousel" data-slide-to="1"></li>
<li data-target="#ourCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#ourCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#ourCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I know that Bootstrap is loading because the first image is showing along with the controls and indicators are there -- the only thing is that they're not responsive.
I put the below code in the main app component, which from there the carousel component is called.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
I also tried adding this before and after the code above...
<script>
$("#ourCarousel").carousel();
</script>
I feel like I've done everything imaginable to get it to work, am I missing any important steps?
I tried, but it doesn't seem to be a problem. Guess javascript cannot select html.
OR
$(document).ready(function() {
wait for the document to load.
$("#ourCarousel").carousel()
})
$("#ourCarousel").carousel()
<!-- begin snippet: js hide: false console: true babel: false -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="ourCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#ourCarousel" data-slide-to="0" class="active"></li>
<li data-target="#ourCarousel" data-slide-to="1"></li>
<li data-target="#ourCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1525160354320-d8e92641c563?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d46c460396a4572221a1aa45cf67fc6b&auto=format&fit=crop&w=1834&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1525160354320-d8e92641c563?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d46c460396a4572221a1aa45cf67fc6b&auto=format&fit=crop&w=1834&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1525160354320-d8e92641c563?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d46c460396a4572221a1aa45cf67fc6b&auto=format&fit=crop&w=1834&q=80" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#ourCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#ourCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
What I ended up doing is putting the above code (waiting for the document to be ready) and moving the imports of Bootstrap from the module with the carousel to index.html. Thanks!
my next/prev buttons are not working. Can someone help me. Thanks!I am new to coding I have researched a bunch and tried different things but nothing is working.
<section class="section-main">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="img/slide1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/slide2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/slide3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="col-md-4">
</div>
</div>
</div>
try adding the required javascript libraries that Bootstrap uses in between the head tags at the top of your html file.
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
An example of what the full html file would look like with the above libraries inbetween the head tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<section class="section-main">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="img/slide1.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/slide2.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/slide3.png" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
</section>
</body>
</html>
A link to the documentation Bootstrap provides explaining how to get started.
https://getbootstrap.com/docs/4.0/getting-started/introduction/
I hope this helps
I created an example on codepen based on bootstrap document
The example demonstrates html, css, js codes to make the carousel work.
$('.carousel').carousel()
Please double check if you add required libraries including
jquery,
bootstrap.js
bootstrap.css.
I added them through Pen Settings.
i'm having some problems with the images in bootstrap v4 image carousel. If i scale down the browser width the height of image stays the same but the width of image getting smaller so the image gets very stretched out on the height.
I have been looking at similar threads here on stackoverflow and tried everything i found in the comments but it still does not work. So i decided to make a new thread about this.
Here is a codepen link https://codepen.io/anon/pen/owNyyx but i paste the code here too if you do not wish to visit codepen :)
So here is the code i have
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="images/image1.png" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random Title for image1</h3>
<p>Random description1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/image2.png" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random title for image2</h3>
<p>Random description2</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/image3.png" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random title for image3</h3>
<p>Random description3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
It's because the img parent, .carousel-item is display: flex and the img is a flex-child, so it's "stretching" via the default align-items: stretch on the parent.
A number of ways you can fix this. Easiest is probably to give align-items a value other than stretch.
Or if you don't want to apply custom CSS and keep your changes in the markup, wrap each img in a block element like div or figure or whatever works for your site.
.carousel-item {
align-items: flex-start;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://lorempixel.com/1900/500" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Cheap prizes for hairstyling</h3>
<p>Good prizes to style your hair</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://lorempixel.com/1900/500/cats/2" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>3 Years of experience as Hairstylist</h3>
<p>Awesome results !</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://lorempixel.com/1900/500/cats/3" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h3>Some random caption text</h3>
<p>Some random description</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I'm trying to use the bootstrap carousel on my website, but only the first picture shows. The arrows and toggle buttons on the button will not switch to the second or third photo. The error in the console says 'file not found'.
I'm not sure what I'm missing and it's driving me crazy. Any help would be appreciated as I'm sure it's a quick and relatively easy thing I'm missing... Thanks in advance!
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/EM1.jpg" class="img-responsive" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/EM2.jpg" alt="...">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/EM3.jpg" alt="..">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span></a>
</div>
here the working carousel code of bootstrap
file not found error comes when you attached incorrectly. so it would be better that you start coding again this snippet is working i hope it helps.
h2{
margin: 0;
color: #666;
padding-top: 90px;
font-size: 52px;
font-family: "trebuchet ms", sans-serif;
}
.item{
background: white;
text-align: center;
height: 300px !important;
}
.carousel{
margin-top: 20px;
}
.bs-example{
margin: 20px;
}
.carousel.carousel-fade .item {
opacity:0;
filter: alpha(opacity=0); /* ie fix */
}
.carousel.carousel-fade .active.item {
opacity:1;
filter: alpha(opacity=100); /* ie fix */
}
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Carousel</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="6500" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item carousel-fade">
<h2>Slide 1</h2>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item carousel-fade">
<h2>Slide 2</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
</div>
</div>
<div class="item carousel-fade">
<h2>Slide 3</h2>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>