I have created a slider using Bootstrap and some JavaScript code that I modified from various sources. Everything is working well, but I want to remove the transition or animation that occurs when the caption changes.
Currently, the captions seem to slide in and out, but I want them to appear and disappear instantly. I suspect it might be due to something in the Bootstrap JavaScript, but I'm not sure how to address it.
HTML:
<div class="container">
<div data-ride="carousel" class="carousel slide" data-interval="false" id="carousel-1">
<div class="carousel-inner">
<div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
<div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
<div class="carousel-item active"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
</div>
<div><a href="#carousel-1" role="button" data-slide="prev" class="carousel-control-prev"><span aria-hidden="true" class="carousel-control-prev-icon"></span><span class="sr-only">Previous</span></a><a href="#carousel-1" role="button" data-slide="next" class="carousel-control-next"><span aria-hidden="true" class="carousel-control-next-icon"></span><span class="sr-only">Next</span></a></div>
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2" class="active"></li>
</ol>
</div>
<div id="slider-captions">
<div>
<div id="caption-0" class="pp-carousel-caption">
<p>Paragraph 1</p>
</div>
<div id="caption-1" class="pp-carousel-caption">
<p>Paragraph 2</p>
</div>
<div id="caption-2" class="pp-carousel-caption">
<p>Paragraph 3</p>
</div>
</div>
</div>
JavaScript:
$("#carousel-1").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider-captions .pp-carousel-caption:not(#caption-'+step+')').hide( function() {
$('#caption-'+step).show();
});
});
CSS:
.pp-carousel-caption:not(#caption-0) {
display: none;
}
.pp-carousel-caption:not(#caption-0) {
display: none;
}