Bootstrap5 Carousel with await promise - javascript

I've got a bootstrap5 carousel which works fine until I generate the carousel after the Promise is fulfilled. See the example below, if I UNcomment the row in the start() function it stops working and only the first image is displayed.
Does anybody know why I cannot generate carousel dynamically once some Promise is fullfiled?
<body>
<div class="carousel-wrapper">
</div>
</body>
<script>
function insertCarousel() {
let carousel = `<div class="col-md-4">
<!-- carousel start -->
<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 class='tempimg' src="./items_photos/10_100.jpeg" data-trueimg="./items_photos/10_100.jpeg" class="d-block w-100" width="250" height="250" alt="...">
</div>
<div class="carousel-item">
<img class='tempimg' src="./items_photos/10_200.jpeg" data-trueimg="./items_photos/10_200.jpeg" class="d-block w-100" width="250" height="250" alt="...">
</div>
<div class="carousel-item">
<img class='tempimg' src="./items_photos/1_200.jpeg" data-trueimg="./items_photos/1_200.jpeg" class="d-block w-100" width="250" height="250" 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>
<!-- carousel end -->
</div>`;
document.querySelector('.carousel-wrapper').insertAdjacentHTML('beforeend', carousel);
}
function delay() {
return new Promise((resolve, reject) => {
setTimeout(resolve,1000);
});
}
async function start() {
/* if I apply the following row, carousel stops working and it just displays the first image */
// await delay();
insertCarousel();
}
start();
</script>


I have sorted it out. I had to initiate a new carousel and run cycle method. See the code:
function delay() {
return new Promise((resolve, reject) => {
setTimeout(resolve,1000);
});
}
async function start() {
await delay();
insertCarousel();
let myCarousel = document.querySelector('#carouselExampleIndicators');
let carousel = new bootstrap.Carousel(myCarousel, {
interval: 3000
}).cycle();
}
start();

Related

Bootstrap 5: add tabs to slider

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>

dependencies necessary for Bootstrap's carousel

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>

Bootstrap carousel: Measure time that an image is open

does anyone know how to measure the time that an image in an Bootstarp 5 carousel (see below) is visible for the user? The idea is to measure the time that the user is looking at a specific image (e.g. image of a product) in the carousel.
f.e. the time in milliseconds that the image "image_1" is visible (open).
Many thanks,
````
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="image_1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="image_2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="image_3">
</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>
````

Something like this could work:
var intervalTime = 100;
var carousel = document.getElementById('carouselExampleControls')
var timesMilliseconds = {
0: 0
};
var currentSlideIndex = 0;
var interval = setInterval(function() {
if (timesMilliseconds.hasOwnProperty(currentSlideIndex)) {
timesMilliseconds[currentSlideIndex] += intervalTime;
} else {
timesMilliseconds[currentSlideIndex] = intervalTime;
}
}, intervalTime);
carousel.addEventListener('slide.bs.carousel', function (event) {
var currentIndex = currentSlideIndex.toString();
var currentTotalTime = timesMilliseconds[currentSlideIndex].toString();
console.log('Looked at slide ' + currentIndex + ' for a total of ' + currentTotalTime + ' ms');
currentSlideIndex = event.to;
});
https://jsfiddle.net/412nu3dy/2/

How can I change favicons depending on Bootstrap carousel?

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>

Is there any way to stop auto-playing of bootstrap carousel slide?

I'm making a carousel slide with Bootstrap carousel. I want to stop auto-playing of slides and I would like to make a button, which controls to toggle the auto-playing on/off.
I've searched about it already and it recommended me to add an attribute data-interval=false for the carousel div or to add a script: $('.carousel').carousel({ interval: false, }).
It stops auto-playing when the above values are set as default value but when I want to toggle the auto-playing on/off, it doesn't work and keeps auto-playing.
Here's the script I have so far:
var total = $('.carousel-item').length;
var currentIndex = $('div.active').index() + 1;
$('.current_slide').html(currentIndex + ' / ' + total);
$('.carousel').on('slid.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;
var text = currentIndex + ' / ' + total;
$('.current_slide').html(text);
});
function navAutoplay() {
if ($('.if_paused').hasClass('carousel_now')) {
$('*.carousel_now').removeClass('carousel_now');
$('.if_started').addClass('carousel_now');
}
else {
$('*.carousel_now').removeClass('carousel_now');
$('.if_paused').addClass('carousel_now');
}
}
$(document).ready(function() {
if ($('.if_started').hasClass('carousel_now')) {
$('.carousel').carousel({
interval: 7000
});
}
else {
$('.carousel').carousel({
interval: false
});
}
})
The html code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carouselExampleFade" data-interval="7000" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel_nav">
<div class="current_slide">
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<div class="corousel_nav_autoplay">
<a class="if_paused">
<span onclick="navAutoplay()"></span>
</a>
<a class="if_started carousel_now">
<span onclick="navAutoplay()"></span>
</a>
</div>
<a class="carousel-control-next" href="#carouselExampleFade" 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 id="carouselExampleFade" data-interval="7000" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/slide01_01.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/slide02_01.png" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel_nav">
<div class="current_slide">
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<div class="corousel_nav_autoplay">
<a class="if_paused">
<span onclick="navAutoplay()"></span>
</a>
<a class="if_started carousel_now">
<span onclick="navAutoplay()"></span>
</a>
</div>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
var total = $('.carousel-item').length;
var currentIndex = $('div.active').index() + 1;
$('.current_slide').html(currentIndex + ' / ' + total);
$('.carousel').on('slid.bs.carousel', function() {
currentIndex = $('div.active').index() + 1;
var text = currentIndex + ' / ' + total;
$('.current_slide').html(text);
});
</script>
<script>
function navAutoplay() {
if ($('.if_paused').hasClass('carousel_now')) {
$('*.carousel_now').removeClass('carousel_now');
$('.if_started').addClass('carousel_now');
}
else {
$('*.carousel_now').removeClass('carousel_now');
$('.if_paused').addClass('carousel_now');
}
}
$(document).ready(function() {
if ($('.if_started').hasClass('carousel_now')) {
$('.carousel').carousel({
interval: 7000
});
}
else {
$('.carousel').carousel({
interval: false
});
}
})
</script>

Hi according to docs you should be able to toggle carusel using those methods:
.carousel('cycle')
// to enable cycling
.carousel('pause')
// to stop cycling thru items
I think if you call .carusel() with options object it initilizes it again and may not work as you expect

You just have to read the docs from bootstrap, it's documented there.
Here's an example on how you would implement it.
function navAutoplay() {
const isAutoPlayEnabled = $('#toggle-auto-play').text() === 'Pause';
if (isAutoPlayEnabled) {
// Pause carousel if autoplay is enabled
$('#carouselExampleIndicators').carousel('pause');
$('#toggle-auto-play').text('Auto Play');
} else {
// Enable Auto Play if it's paused
$('#carouselExampleIndicators').carousel({
interval: 500, // Your choice of interval
});
$('#toggle-auto-play').text('Pause');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
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.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
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"
class=""
></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="2"
class=""
></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img
class="d-block w-100"
data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide"
alt="First slide [800x400]"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_178a69a8120%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_178a69a8120%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9140625%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
/>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide"
alt="Second slide [800x400]"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_178a69a8120%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_178a69a8120%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
/>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide"
alt="Third slide [800x400]"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_178a69a8120%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_178a69a8120%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22276.9921875%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
/>
</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>
<!-- Toggle button -->
<div>
<button id="toggle-auto-play" class="btn btn-primary" onclick="navAutoplay()">Pause</button>
</div>
</body>
</html>

I've already tried .carousel('pause'); and .carousel('cycle'); to toggle the auto-playing, and it didn't work.
function navAutoplay() {
if ($('.if_paused').hasClass('carousel_now')) {
$('*.carousel_now').removeClass('carousel_now');
$('.if_started').addClass('carousel_now');
$('.carousel').carousel('cycle');
}
else {
$('*.carousel_now').removeClass('carousel_now');
$('.if_paused').addClass('carousel_now');
$('.carousel').carousel('pause');
}
}

Categories

Resources