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

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');
}
}

Related

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>

Instead of next and previous arrow, Is it possible to show the next and previous slider image in bootstrap 4?

I am using a bootstrap 4 image carousel slider for my website. I tried the below code and it's working.
Now What I am doing is, Instead of next and previous arrow I have to show the next and previous slider image. Is it possible?
This is an previous arrow example. I have to display the image instated of arrow.
Example
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Third slide">
</div>
</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>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

You can overwrite carousel class and set your own css on next and prev images
try this code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Third slide">
</div>
</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>
<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>
<style>
.carousel-control-prev-icon{width: 100px;height:250px;}
.carousel-control-next-icon{width: 100px;height:250px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
var next_src = $('.carousel-inner .active').next().find('.d-block').attr('src');
var prev_src = $('.carousel-item').last().find('.d-block').attr('src');
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
$('#carouselExampleFade').on('slid.bs.carousel', function () {
var next_src = $('.carousel-inner .active').next().find('.d-block').attr('src');
if(next_src == undefined){
next_src = $('.carousel-item').first().find('.d-block').attr('src');
}
var prev_src = $('.carousel-inner .active').prev().find('.d-block').attr('src');
if(prev_src == undefined){
prev_src = $('.carousel-item').last().find('.d-block').attr('src');
}
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
})
</script>
if you want to use background image as slide then use this jquery code
var next_src = $('.carousel-inner .active').next().css('background-image').replace('url(','').replace('")','').replace('"','');
var prev_src = $('.carousel-item').last().css('background-image').replace('url(','').replace('")','').replace('"','');
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
$('#carouselExampleFade').on('slid.bs.carousel', function () {
var next_src = '';
if($('.carousel-inner .active').next().length > 0){
next_src = $('.carousel-inner .active').next().css('background-image').replace('url(','').replace('")','').replace('"','');
}else{
next_src = $('.carousel-item').first().css('background-image').replace('url(','').replace('")','').replace('"','');
}
var prev_src = $('.carousel-inner .active').prev().find('.d-block').attr('src');
if($('.carousel-inner .active').prev().length > 0){
prev_src = $('.carousel-inner .active').prev().css('background-image').replace('url(','').replace('")','').replace('"','');
}else{
prev_src = $('.carousel-item').last().css('background-image').replace('url(','').replace('")','').replace('"','');
}
$('.carousel-control-prev-icon').css({"background-image": "url('"+prev_src+"')"});
$('.carousel-control-next-icon').css({"background-image": "url('"+next_src+"')"});
})

From my understanding the functionality is not supported by bootstrap, but you can approach this with adding a custom class to your carousel and then using css to add a background image to the arrows
So for example:
<a class="carousel-control-prev" href="#carouselExampleFade
Will become:
<a class="carousel-control-prev carousel-back-arrow" href="#carouselExampleFade
In this line here you can add carousel-back-arrow into the class attribute, then you can add a tag in the header.
Inside you can then style your custom class
.carousel-back-arrow { background-image: url(path-to-your-image); background-size: contain; }
You can read about classes here:
https://www.w3schools.com/html/html_classes.asp
Here you can see an example of image inside elem with css:
https://www.freecodecamp.org/news/how-to-add-an-image-url-to-your-div/

Yes you can display previous & next image in sliders with arrow mark by using bootstrap carousel
check the demo link i mentioned here, i hope it will useful for you
https://codepen.io/glebkema/pen/daLzpL
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="//placehold.it/900x300/c69/f9c/?text=1" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="//placehold.it/900x300/9c6/cf9/?text=2" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="//placehold.it/900x300/69c/9cf/?text=3" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

Hi try this code & refer my screenshot too
your images
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>CodePen Demo</title>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<link rel="canonical" href="https://codepen.io/glebkema/pen/daLzpL">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<style class="INLINE_PEN_STYLESHEET_ID">
.show-neighbors {
overflow: hidden;
}
.show-neighbors .carousel-indicators {
margin-right: 25%;
margin-left: 25%;
}
.show-neighbors .carousel-control-prev,
.show-neighbors .carousel-control-next {
background: rgba(255, 255, 255, 0.3);
width: 25%;
z-index: 11;
/* .carousel-caption has z-index 10 */
}
.show-neighbors .carousel-inner {
width: 150%;
left: -25%;
}
.show-neighbors .carousel-item-next:not(.carousel-item-left),
.show-neighbors .carousel-item-right.active {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.show-neighbors .carousel-item-prev:not(.carousel-item-right),
.show-neighbors .carousel-item-left.active {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.show-neighbors .item__third {
float: left;
position: relative;
/* captions can now be added */
width: 33.33333333%;
}
</style>
<script src="https://static.codepen.io/assets/editor/iframe/iframeConsoleRunner-7f4d47902dc785f30dedcac9c996b9f31d4dfcc33567cc48f0431bc918c2bf05.js"></script>
<script src="https://static.codepen.io/assets/editor/iframe/iframeRefreshCSS-e03f509ba0a671350b4b363ff105b2eb009850f34a2b4deaadaa63ed5d970b37.js"></script>
<script src="https://static.codepen.io/assets/editor/iframe/iframeRuntimeErrors-29f059e28a3c6d3878960591ef98b1e303c1fe1935197dae7797c017a3ca1e82.js"></script>
</head>
<body>
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide show-neighbors" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide"" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" class="d-block w-100" alt="">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script id="INLINE_PEN_JS_ID">
$('.carousel-item', '.show-neighbors').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}).each(function () {
var prev = $(this).prev();
if (!prev.length) {
prev = $(this).siblings(':last');
}
prev.children(':nth-last-child(2)').clone().prependTo($(this));
});
//# sourceURL=pen.js
</script>
</body>
</html>

is there a way to call a particular slide image in click event in JavaScript or jQuery

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;
});

how to disable left and right arrow in slide using bootstrap

I need to create a slide when the image is first the left arrow should be hide and when the last image is active right arrow should be hide. I had added my code here. Is there any other alternative method to replace or any new method. Is there any option to modify the code, Can anyone point me in the right direction?
$("[id^=viewDocs]").on("click", function () {
var docId = $(this).attr("id");
var docIndex = docId.substr(docId.length - 1);
var activeItemId = $(this).data("value");
$("div>div.item").removeClass("active");
$("#"+activeItemId).addClass("active");
var appName = $('#SavepatientResultsDetails_appName').val();
var paramValue = $(this).data("id");
$("#myModal").removeClass("hidden");
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
var modal = document.getElementById("myModal");
modal.style.display = "block";
});
$('#myCarousel').on('slide.bs.carousel', function (ev) {
var itemId = ev.relatedTarget.id;
var paramValue = $('#'+itemId).data('value');
var appName = $('#SavepatientResultsDetails_appName').val();
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
});
.carousel-inner > .item > img,
.carousel-inner > .item > div,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="downloadDocId" href="/doctorclinic/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId=100250">
<span class="download-file" onclick="document.getElementById('myModal').style.display='none'"><i class="glyphicon glyphicon-download-alt"></i></span>
</a>
<a id="downloadDocId" href="#">
<span class="close-popup" onclick="document.getElementById('myModal').style.display='none'">×</span>
</a>
<div class="modal-content1" id="img01">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li id="indicator1" data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li id="indicator2" data-target="#myCarousel" data-slide-to="1" class=""></li>
<li id="insesrtIndicator" class="hidden"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="insertCarouselItem" class="hidden"></div>
<div class="item active" data-value="100250" id="docPdf1">
<div id="pdfDoc1">
<canvas height="841" width="595" style="display: block;"></canvas>
</div>
</div>
<div class="item" data-value="100301" id="docImage2"></div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="display: none;">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

You can use these JavaScript codes.
First:
$('.left').hide();
$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
if (currentIndex >= 1) {
$('.left').show();
}
else {
$('.left').hide();
}
if (currentIndex === (carouselData.$items.length-1)) {
$('.right').hide();
$('.left').show();
}
else {
$('.right').show();
}
})
Second
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
$('#myCarousel').on('slid', '', checkitem);
$(document).ready(function(){
checkitem();
});
function checkitem()
{
var $this = $('#myCarousel');
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
Here I used the second JavaScript example and made what you want:
$('.left').hide();
$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
if (currentIndex >= 1) {
$('.left').show();
}
else {
$('.left').hide();
}
if (currentIndex === (carouselData.$items.length-1)) {
$('.right').hide();
$('.left').show();
}
else {
$('.right').show();
}
})
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="//placehold.it/1024x600" class="img-responsive">
<div class="carousel-caption">
one
</div>
</div>
<div class="item">
<img src="//placehold.it/1024x600/999" class="img-responsive">
<div class="carousel-caption">
two
</div>
</div>
<div class="item">
<img src="//placehold.it/1024x600/bbb" class="img-responsive">
<div class="carousel-caption">
three
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Hope it'll helps you. Good luck! :)

Add carousel control (next - prev) automaticlly

I have more than one bootstrap carousel in my project and I want to reduce my html elements I remove my carousel-indicators and I added with js.I want to do same thing for carousel-control but my head is swollen how can I adapt my code
var myCarousels = $(".carousel");
myCarousels.each(function( index, element ) {
var myCarousel = $("#"+$(element).attr('id'));
myCarousel.append("<ol class='carousel-indicators'></ol>");
var indicators = $("#"+$(element).attr('id') + " .carousel-indicators");
$("#"+$(element).attr('id') +" .carousel-inner").children(".item").each(function(index) {
(index === 0) ?
indicators.append("<li data-target='#"+$(element).attr('id')+"' data-slide-to='"+index+"' class='active'></li>") :
indicators.append("<li data-target='#"+$(element).attr('id')+"' data-slide-to='"+index+"'></li>");
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://ichef.bbci.co.uk/news/976/cpsprodpb/87D3/production/_84817743_beckhamfashion.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://ichef.bbci.co.uk/news/976/cpsprodpb/9949/production/_84814293_dummy.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

append controls inside of myCarousel:
var myCarousels = $(".carousel");
myCarousels.each(function(index, element) {
var myCarousel = $("#" + $(element).attr('id'));
myCarousel.append('<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>');
var indicators = $("#" + $(element).attr('id') + " .carousel-indicators");
$("#" + $(element).attr('id') + " .carousel-inner").children(".item").each(function(index) {
(index === 0) ?
indicators.append("<li data-target='#" + $(element).attr('id') + "' data-slide-to='" + index + "' class='active'></li>"):
indicators.append("<li data-target='#" + $(element).attr('id') + "' data-slide-to='" + index + "'></li>");
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://ichef.bbci.co.uk/news/976/cpsprodpb/87D3/production/_84817743_beckhamfashion.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://ichef.bbci.co.uk/news/976/cpsprodpb/9949/production/_84814293_dummy.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
</div>

Categories

Resources