I am currently utilizing bootstrap in combination with handlebars to develop a carousel. The goal is to display specific items retrieved from my database within the carousel.
However, I have encountered an issue where instead of smoothly transitioning to the second slide, the carousel skips through it and suddenly disappears from the page.
The database fetches two test items as follows:
{ _id: 5d28ad4eec77e8389c56792b,
slug: '5d28ad4eec77e8389c56792b',
__v: 1,
name: 'Test ',
publishedDate: 2019-07-11T23:00:00.000Z,
review: 'This was good',
image: [ 5ce83014af97ea064c5a750d ] },{ _id: 5d29fab5c8a3794a081f65d6,
slug: 'test2',
name: 'test2',
__v: 0,
publishedDate: 2019-07-12T23:00:00.000Z,
review: 'fdfsfdsdfsdfdsfsdfs',
image: [] }
Here is the code for the carousel:
<div class="container-fluid" id="anchorJump">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
{{#each testimonials}}
{{#if @first}}
<div class="item active">
<div class="carousel-item active">{{{this.review}}}
{{else}}
<div class="carousel-item">{{{this.review}}}
{{/if}}
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
Additionally, the javascript code for the carousel operation:
$('.carousel').carousel({
interval: 6000,
pause: "false",
wrap:true
});