Bootstrap 4 Dropdown Menu & Carousel Not Working

Bootstrap 4 Dropdown Menu & Carousel Not Working - javascript

I just started with Bootstrap4 and I am implementing Carousel & Dropdown menu in a website. But both don't seem to work whenever I perform a click on the drop-down menu or carousel indicator it adds the id in URL and takes to the top of the page again. Following is the code.
<div class="col-md-6">
<!-- http://w3widgets.com/responsive-slider/img/slide-2.jpg -->
<div id="carouselExampleControls" 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="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I've included all the required CSS(bootstrap.min.css) and JS(jQuery, Popper, bootstrap.min.js)
I don't know what's the problem. It's not even showing any kind of error or warning in the console too.

Verify all links are linked properly, and your directing to exact file location or use CDN
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
<!-- http://w3widgets.com/responsive-slider/img/slide-2.jpg -->
<div id="carouselExampleControls" 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="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://w3widgets.com/responsive-slider/img/slide-2.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Related

Bootstrap carousel is not sliding

I am trying to use the bootstrap carousel but it only shows the pictures an the slides doesnt work. The other older questions about this topic doesn't lead me to the correct solution. what im doing wrong? Iam not sure how to handle with the jquery, i think
<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="img/123.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<div align="center">
<p>Hier kommen Sie zur Übersicht unserer Zimmer</p>
<p><a th:href="#{/catalog/}" class="btn btn-primary">Zimmerbuchen</a></p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/1234.jpeg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="12345.jpeg" 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>
</body>
</html>

Have you initialized your carousel like this?
<!-- Calling jquery first -->
<script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>
<!-- Carousel -->
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval: 3000
})
});
</script>

I need to add a carousel that works as a slideshow

So I am trying to add a carousel but images will come one by one on top of each other
I have tried the bootstrap.com/carousels
<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 src="ninjago3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</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>
Images come one by one.

You might have missed to include Bootstrap dependency CSS, JS and Jquery files.
Replace image source with images you needed for your carousel.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<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 src="https://www.gstatic.com/webp/gallery/1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.gstatic.com/webp/gallery/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.gstatic.com/webp/gallery/4.jpg" class="d-block w-100" alt="...">
</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>
</body>
</html>

my carousal "next" button isnt working and my carousal isn't automatically transitioning

I am trying to code a carousel and it is not working, both the next/previous buttons and the automatic slides
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!--Slideshow starts here-->
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/Users/catherinekorren/Desktop/WebDesign/i6_local/cause/bootstrap/images/dj.gif" class="d-block w-100" alt="DJ">
<div class="carousel-caption d-none d-md-block">
<h5>Music Can Change Lives</h5>
<p>Whether You're A DJ</p>
</div>
</div>
<div class="carousel-item">
<img src="/Users/catherinekorren/Desktop/WebDesign/i6_local/cause/bootstrap/images/crowd.gif" class="d-block w-100" alt="Black Hole 1">
<div class="carousel-caption d-none d-md-block">
<h5>Or a Listener</h5>
<p>Anywhere Across the World</p>
</div>
</div>
<div class="carousel-item">
<img src="img/blackhole.jpg" class="d-block w-100" alt="Black Hole 3">
<div class="carousel-caption d-none d-md-block">
<h5>Third Hole</h5>
<p>This is another artist...</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Slideshow ends here -->
</div>
</div>

Hope this code may help. You can change the time interval.

How do I make carousel slideshow smaller?

My Carousel goes fullscreen but I want it to be smaller, like putting a margin to the left and right, so it does not take up the whole page. Tried it with CSS but no luck so far.
<section id="slider">
<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="wildfire1.jpg" alt="waldbrband1"> </div>
<div class="carousel-item"> <img class="d-block w-100" src="wildfire2.jpg" alt="waldbrand2"> </div>
<div class="carousel-item"> <img class="d-block w-100" src="wildfire3.jpg" alt="waldbrand3"> </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>
</section>

I'm not sure this is the best way of doing it but you could just put your code in a container like so:
<div class="MySlider-container">
<section id="slider">
<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="wildfire1.jpg" alt="waldbrband1"> </div>
<div class="carousel-item"> <img class="d-block w-100" src="wildfire2.jpg" alt="waldbrand2"> </div>
<div class="carousel-item"> <img class="d-block w-100" src="wildfire3.jpg" alt="waldbrand3"> </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>
</section>
</div>
And your css code would look something like this:
.MySlider-container {
margin-left: 5rem;
margin-right: 5rem;
}

Carousel pictures are below each other, I'd like them inside with a slide

My carousel is showing each slide below each other instead of one.
I have 3 slides that are below each other, instead I want them to be "inside" with a slide, but for some reason it doesn't work.
A snippet is below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval: 1000
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".carousel-inner div:first").addClass("active");
});
</script>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" 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://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="3">
</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>

The div containing the images shoud have class="item" not "carousel-item", change it.
Here's the working snippet.
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval:2000
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="1">
</div>
<div class="item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="2">
</div>
<div class="item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="3">
</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>

Late to the game. The prev post got it. :)
The div container classes holding the images were using a different class. This line of JS isn't necessary because the class can be included in the HTML.
$(".carousel-inner div:first").addClass("active");
The extra CSS is just for the example.
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval: 1000
})
// Not needed because the class can be included in the HTML
// $(".carousel-inner div:first").addClass("active");
});
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="1">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="2">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="3">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Bootstrap 4 Dropdown Menu & Carousel Not Working - javascript

Related

Bootstrap carousel is not sliding

I need to add a carousel that works as a slideshow

my carousal "next" button isnt working and my carousal isn't automatically transitioning

How do I make carousel slideshow smaller?

Carousel pictures are below each other, I'd like them inside with a slide

Categories

Resources