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>
Related
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="...">
Unfortunately, this is a remarkable stupid question. However, I could not figure out how to make a working click counter für the Bootstrap carousel button. The problem is the span element for the previous and next icons.
The button counter does not count clicks on the repective span element.
$('button').click(function(btn) {
btn.target.dataset.click_counter_hidden = (+btn.target.dataset.click_counter_hidden || 0) + 1;
$('#click_search_left').val($('button[data-id="slider_left"]').attr("data-click_counter_hidden") || 0);
$('#click_search_right').val($('button[data-id="slider_right"]').attr("data-click_counter_hidden") || 0);
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<div class=class="carousel-item active">
<div class="carousel-item" id="example1">
<img id="example_1" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_1">
</div>
<div class="carousel-item" id="example2">
<img id="example_2" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_2">
</div>
<div class="carousel-item" id="example3">
<img id="example_3" src="https://picsum.photos/200/300" class="d-block w-100" alt="example_1">
</div>
</div>
<button type="button" id='slider_left' data-id="slider_left" class="carousel-control-prev tracked_element" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" id="prev_icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" id='slider_right' data-id="slider_right" class="carousel-control-next tracked_element" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" id="next_icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<input type="hidden" name="click_search_left" id="click_search_left" value="0" />
<input type="hidden" name="click_search_right" id="click_search_right" value="0" />
Add your counter data attribute to the two buttons (this is just to help initialize).
<button data-click_counter_hidden="0">
Check to see if click event was on button. If not it must've been the child span element so get the parent (the button).
$('button').on('click', function(e){
$t = $(e.target);
if (!$t.is('button')){
$t = $t.parent();
}
clicks = parseInt($t.data('click_counter_hidden')) + 1;
$t.data('click_counter_hidden', clicks);
// display counter value elsewhere if needed
});
For some reason the JavaScript isn't displaying. I've checked the inspect element sources and it does in fact load correctly, however it isn't being applied. Any idea why? Thanks.
<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">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}"></script>
<title>Hello World</title>
</head>
app.js:
require('./bootstrap');
I'm specifically wanting dropdown menus to work and also the bootstrap carousel from the bootstrap website:
<div id="carouselExampleFade" class="carousel slide carousel-fade" 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="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
You need recompile your assets.
npm run watch
or
npm run prod
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');
}
}
I did manage to get the previous image in the carousel on click but I'm not able to specify the "data-slide-to" image
This is the code for getting the previous image on click
$("#header").carousel('prev');
but while implementing the second one I'm getting no response
$("#header").carousel($(this).data('slide-to',0));
function gotoSlide(number){
$(".carousel").carousel(number);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" 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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<button id="btn-1" onclick="gotoSlide(0);">1st Slide</button>
<button id="btn-2" onclick="gotoSlide(1);">2nd Slide</button>
<button id="btn-3" onclick="gotoSlide(2);">3rd Slide</button>
<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-1484151709479-3996843263cf?auto=format&fit=crop&w=1650&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1459292414836-763d35c7ae4c?auto=format&fit=crop&w=1650&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1506934535230-26f42bf91ae6?auto=format&fit=crop&w=1652&q=80" alt="Third slide">
</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>
An example using Bootstrap 4's Carousel methods
carousel.on('slide.bs.carousel', function (event) {
var active = $(event.target).find('.carousel-inner > .item.active');
var from = active.index();
var next = $(event.relatedTarget);
var to = next.index();
var direction = event.direction;
});