I am working on an HTML site and I am using the bootstrap 5 frameworks.
MY GOAL is to add bootstrap 5 Carousel in my section next to an image, like show in this image.
[https://imgur.com/a/JSvH2nw]
I have directly copied Carousel code from bootstrap docs here is the link
https://getbootstrap.com/docs/5.1/components/carousel/#slides-only
But for some reason, the Carousel is not showing any content it is only showing controls and slider buttons like this
https://imgur.com/a/26ItRqU
what m i doing wrong?
<html lang="de">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#400;500;600;700;800;900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400&display=swap" rel="stylesheet">
<!-- Bootstrap icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container pt-5">
<div class="row">
<div class="col-xl-8 col-lg-6 text-sm-center ">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" 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 class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col-xl-4 col-lg-6 custmcol mx-auto text-center">
<img class="img-fluid sidewhyusimg " src="https://dummyimage.com/400x400/000/fff" alt="cleaningImage">
</div>
<span class=" shadow-do text-center"><a href="#" class=" btn btn-primary mainbtn mx-auto mt-5 ">Mehr
erfahren</a></span>
</div>
</div>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap- -->
</body>
</html>
You need to replace ... with actual image link
where the img tag is in your html code
<img src="..." class="d-block w-100" alt="...">
like this :
<img src="..." class="d-block w-100" alt="...">
Update:
if you want carousel without image you can do that by following:
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000" >
<!-- <img src="https://cdn.pixabay.com/photo/2015/10/29/14/38/web-1012467__340.jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<!-- <img src="https://img.freepik.com/free-vector/abstract-dotted-banner-background_1035-18160.jpg?size=626&ext=jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<!-- <img src="https://static.vecteezy.com/system/resources/thumbnails/001/234/358/small/modern-blue-halftone-banner-background.jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
Simple trick: just remove the img tags from the html and remove carousel-caption class from the caption text div
alternatively you can use owl carousel to create beautiful carousels just like what you want
Here is a jsbin link i created with your code.
https://jsbin.com/rufivuwije/edit?html,output
Note that the image address in your code should be changed to your own image address.
<img src="..." class="d-block w-100" alt="...">
Related
I created slider using Bootstrap 5. Currently result is:
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<div class="col-xl-6 col-md-12 ratio_65">
<div class="row g-3">
<div class="col-xl-12 col-sm-12">
<div class="home-contain">
<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://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" 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 class="home-detail text-white p-center text-center">
<div>
<h4 class="text-center">
<!--Organic Lifestyle-->
</h4>
<h5 class="text-center">
<!--Best Weekend Sales-->
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
I read the Bootstrap documentation about carousel, also tried all available "example" in the search engine. Unfortunately, there is no way I can achieve such an effect.
I try get effect and add name every slider as tab. Can anyone little help me on how to add extra tabs like this? I paste example photo here:
You are right, Bootstrap does not support carousel slider tabs out of the box. But because Bootstrap uses the data attributes data-bs-target and data-bs-slide-to for the indicators you can apply them to other elements.
For example, apply them on a list outside of the carousel, which are the slider tabs:
<ul class="custom-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
Slide 1
</li>
...
</ul>
The slider tabs in the snippet has more classes to position everything using a row with four columns col. Simply clicking on a <li> element will already set the carousel to that slide index (0).
To style the active slider tab use JavaScript by toggling a class on it, like .active and style it using CSS.
Here are two basic examples, using Jquery or plain Javascript.
Solution with Jquery
Lucky for us, Bootstrap’s carousel class exposes events for hooking into carousel functionality, like slide.bs.carousel:
$('#carouselExampleIndicators').on('slide.bs.carousel', event => { ... });
This function will fire whenever the carousel transitions to another slide. Inside access the event property to, which holds the index of the next slide. Then toggle the active class:
const nextSlide = event.to;
$('.custom-indicators li').removeClass('active');
$('.custom-indicators li[data-bs-slide-to=' + nextSlide + ']').addClass('active');
Now apply some custom CSS to style the tabs, and that's. Here's the complete basic example of custom indicators that can be styled:
$('#carouselExampleIndicators').on('slide.bs.carousel', event => {
const nextSlide = event.to;
$('.custom-indicators li').removeClass('active');
$('.custom-indicators li[data-bs-slide-to=' + nextSlide + ']').addClass('active');
});
.custom-indicators li {
border-top: 3px solid transparent;
}
.custom-indicators li.active {
color: black;
font-weight: bold;
border-top: 3px solid black;
}
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<div class="col-xl-6 col-md-12 ratio_65">
<div class="row g-3">
<div class="col-xl-12 col-sm-12">
<div class="home-contain">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" 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 class="">
<ul class="list-unstyled row gx-0 text-center text-secondary custom-indicators" role="button">
<li class="col p-2 active" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
Slide 1
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
Slide 2
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
Slide 3
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4">
Slide 4
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Solution with JavaScript
Here's a solution that uses plain Javascript to accomplish the same thing. It loops over all slider tabs removing the class active and applies it on the slider tab that has the index (data-bs-slide-to="?") of the next slide.
var carousel = document.querySelector('#carouselExampleIndicators');
carousel.addEventListener('slide.bs.carousel', event => {
var nextSlide = event.to;
var customIndicators = document.querySelectorAll('.custom-indicators li');
for (var i = 0; i < customIndicators.length; i++) {
customIndicators[i].classList.remove('active');
}
document.querySelector('.custom-indicators li[data-bs-slide-to="' + nextSlide + '"]').classList.add('active');
});
.custom-indicators li {
border-top: 3px solid transparent;
}
.custom-indicators li.active {
color: black;
font-weight: bold;
border-top: 3px solid black;
}
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<div class="col-xl-6 col-md-12 ratio_65">
<div class="row g-3">
<div class="col-xl-12 col-sm-12">
<div class="home-contain">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item">
<img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" 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 class="">
<ul class="list-unstyled row gx-0 text-center text-secondary custom-indicators" role="button">
<li class="col p-2 active" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1">
Slide 1
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
Slide 2
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
Slide 3
</li>
<li class="col p-2" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4">
Slide 4
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
What JavaScript dependencies needs to be included when I want to use just the Carousel functionality? That means I don't want to use bootstrap.js, just JS necessary for Carousel (carousel.js, ...).
The setup code (with regards to the docs) is:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
But obviously the Bootstrap 5 part is missing, as I get the error:
(index):511 Uncaught ReferenceError: bootstrap is not defined
I can't seem to find this info in Bootstrap's official docs and anywhere else.
I does not give the error if you include bootstrap bundle for instance.
So you must not have included popper or jquery or bootstrap(.min).js
with:
<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>
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
<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>
<div id="carouselExampleDark" class="carousel carousel-dark slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" 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 class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
As I said in the title, I am trying to use JavaScript to update the favicon (shortcut icon) depending on Bootstrap Carousels.
For example, As the carousel changes to the second slide, 2.ico should be the favicon, as the carousel changes to the third slide, 3.ico should be the favicon. Here's what I have done.
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="shortcut icon" href="1.ico" type="image/x-icon">
</head>
<!-- bootstrap boilerplate html for carousels -->
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." 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>
<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>
</body>
<script src="bootstrap.js">
<script>
if ( /*slide 2 is active*/ ) {
document.getElementsByTagName("link")[0].setAttribute("href", "2.ico");
}
if ( /*slide 3 is active*/ ) {
document.getElementsByTagName("link")[0].setAttribute("href", "3.ico");
}
</script>
You need to add an event listener to your carousel. You have more detail explanation in the docs page. But a simple javascript example for your HTML would be
<script>
$(document).ready(function() {
const myCarousel = document.getElementById('carouselExampleControls')
myCarousel.addEventListener('slid.bs.carousel', function() {
let currentIndex = $('.carousel-item.active').index() + 1;
// do something...
})
});
</script>
I have two sliding carousels side by side and i want to control them with one set of controls. My main goal is to have one carousel with two carousels in it and change the direction/animation of one of them to make something cool. I have tried this is my curent code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="kampany">
<div class="container">
<div class="row">
<div class="col-6">
<div class="kampanyapic px-0">
<div id="kampanyacontrol" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1517994112540-009c47ea476b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#kampanyacontrol" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
<div class="col-6">
<div class="kampanyainfo px-0">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1517994112540-009c47ea476b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Third slide">
</div>
</div>
<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>
</div>
</div>
</div>
</div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
I have tried to changing hrefs to class but i failed miserably. Any suggestions?
Try using selective triggering adding the snippet as illustrated below:
$('.kampany .carousel-control-next,.kampany .carousel-control-prev').on('click', function (e) {
var inst = $(this).data("slide");
if(inst== "prev"){
$("#carouselExampleControls").carousel("prev")}
else{ $("#kampanyacontrol").carousel("next")}
})
The full solution will be:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="kampany">
<div class="container">
<div class="row">
<div class="col-6">
<div class="kampanyapic px-0">
<div id="kampanyacontrol" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1517994112540-009c47ea476b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#kampanyacontrol" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
<div class="col-6">
<div class="kampanyainfo px-0">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1517994112540-009c47ea476b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Third slide">
</div>
</div>
<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>
</div>
</div>
</div>
</div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
<script>
$('.kampany .carousel-control-next,.kampany .carousel-control-prev').on('click', function (e) {
var inst = $(this).data("slide");
if(inst== "prev"){
$("#carouselExampleControls").carousel("prev")}
else{ $("#kampanyacontrol").carousel("next")}
})
</script>
I am performing carousel play and pause using jquery and javascript in bootstrap. I have written the code but not getting where I missed.
Here is the full code which might let u catch my mistake.
The problem is that the buttons for play and pause are in the scope of carousel and the behaviour a button normally gives is not the same here.
For the current situation, the buttons are positioned below the prev button and performing the same action which prev is performing i.e. showing the previous image.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid"
src="img/uthappizza.png" alt="uthappizza">
<div class="carousel-caption d-none d-md-block">
<h2>Uthappizza<span class="badge badge-danger">HOT</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<p class="d-none d-sm-block">A unique combination of Indian Uthappam</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid"
src="img/buffet.png" alt="buffet">
<div class="carousel-caption d-none d-md-block">
<h2>Weekend Grand Buffet<span class="badge badge-danger">NEW</span></h2>
<p class="d-none d-sm-block">Featuring mouthwatering combinations with a choice of five different salads.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid"
src="img/alberto.png" alt="alberto">
<div class="carousel-caption d-none d-md-block">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience.</p>
</div>
</div>
</div>
<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>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<div class="btn-group" id="carouselButton">
<button class="btn btn-danger btn-sm" id="carousel-pause">
<span class="fa fa-pause"></span>
</button>
<button class="btn btn-danger btn-sm" id="carousel-play">
<span class="fa fa-play"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/uthappizza.png" alt="uthappizza">
<div class="media-body">
<h2 class="mt-0">Uthappizza<span class="badge badge-danger">HOT</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza.</p>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md">
<div class="media">
<img class="d-flex order-sm-last mr-3 img-thumbnail align-self-center" src="img/buffet.png" alt="buffet">
<div class="media-body">
<h2 class="mt-0">Weekend Grand Buffet<span class="badge badge-danger">NEW</span></h2>
<p>Featuring mouthwatering combinations with a choice of five different salads.</p>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm col-md order-sm-first">
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/alberto.png" alt="alberto">
<div class="media-body">
<h2 class="mt-0">Alberto Somayya<span class="badge badge-danger">Exclusive</span><span class="badge badge-pill badge-secondary">$4.99</span></h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience.</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#mycarousel').carousel({ interval : 2000 });
$('#carousel-pause').click(function(){
$('#mycarousel').carousel('pause');
});
$('#carousel-play').click(function(){
$('#mycarousel').carousel('cycle');
});
});
</script>
</body>
</html>
Proper Behaviour of Carousel play and pause.
yeah dude, i also had the problem while doing a course from coursera. It is not the problem with jquery. Set the "z-index" of "carouselButton" to 2 or higher and it should work
Yeah...set z-index: 1; to carouselButton ...it will definitely work.
After going through your script i discover you opt out an important detail in your code that is you didn't add pause: false after interval:2000. so your script code should have been presented this way.
<script>
$(document).ready(function(){
$("#mycarousel").carousel( { interval: 2000, pause: false } );
$("#carousel-pause").click(function(){
$("#mycarousel").carousel('pause');
});
$("#carousel-play").click(function(){
$("#mycarousel").carousel('cycle');
});
});
</script>
or you can make use of this
<script>
$('#mycarousel').carousel({
interval: 1500,
pause: false
});
$('#carousel-pause').click(function() {
$('#mycarousel').carousel('pause');
});
$('#carousel-play').click(function() {
$('#mycarousel').carousel('cycle');
});
</script>
either ways your code will be up and running fine when you click the pause or play button