I was trying to make a carousel that add only 1 image every click of next or back button
same as this on the link, I wanted to copy this but I found out that the developer using booststrap 4 only and using old version of jquery, js and css links. I can’t find any good tutorial about this.
.banner-name,
.banner-price {
text-align: center;
font-family: marcellus-sc, Arial, Helvetica, sans-serif;
}
.wrapper-banner
.wrapper-banner1,
.carousel {
margin-top: 30px;
}
.wrapper .section .content-banner {
justify-content: center;
display: flex;
} <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<div id="carousel-2" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col">
<img class="banner-carousel" src="https://picsum.photos/200" />
<div class="banner-name">
Curabitur sitamet
</div>
<div class="banner-price">
<span class="economy">₱ </span><span class="price">300</span>
</div>
</div>
<div class="col">
<img class="banner-carousel" src="https://picsum.photos/200" />
<div class="banner-name">
Curabitur sitamet
</div>
<div class="banner-price">
<span class="economy">₱ </span><span class="price">300</span>
</div>
</div>
<div class="col">
<img class="banner-carousel" src="https://picsum.photos/200" />
<div class="banner-name">
Curabitur sitamet
</div>
<div class="banner-price">
<span class="economy">₱ </span><span class="price">300</span>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col">
<img class="banner-carousel" src="https://picsum.photos/200" />
<div class="banner-name">
Curabitur sitamet
</div>
<div class="banner-price">
<span class="economy">₱ </span><span class="price">300</span>
</div>
</div>
<div class="col">
<img class="banner-carousel" src="https://picsum.photos/200" />
<div class="banner-name">
Curabitur sitamet
</div>
<div class="banner-price">
<span class="economy">₱ </span><span class="price">300</span>
</div>
</div>
<div class="col">
<img class="banner-carousel" src="https://picsum.photos/200" />
<div class="banner-name">
Curabitur sitamet
</div>
<div class="banner-price">
<span class="economy">₱ </span><span class="price">300</span>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-2" 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="#carousel-2" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div> So far I tried to change my code into
$('#carousel-2').on('slide.bs.carousel', function () {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemPerSlide = 3;
var totalItems = $('.carousel-item').length;
if (idx = totalItems - (itemsPerSlide)) {
var it = itemPerSlide - (totalItems - idx);
for (var i = 0; i < it; i++) {
if (e.directed == 'left') {
$('.carousel-item').eq(i).appendTo('.carousel-inner');
} else {
$('.carousel-teim').eq(0).appendTo('.carousel-inner');
}
}
}
}).banner-name,
.banner-price {
text-align: center;
font-family: marcellus-sc, Arial, Helvetica, sans-serif;
}
.wrapper-banner
.wrapper-banner1,
.carousel {
margin-top: 30px;
}
.content-banner {
justify-content: center;
display: flex;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel-2" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner row">
<div class="carousel-item col active">
<img class="banner-carousel" src="https://picsum.photos/200" />
<div class="banner-name">
Curabitur sitamet
</div>
<div class="banner-price">
<span class="economy">₱ </span><span class="price">300</span>
</div>
</div>
<div class="carousel-item col active">
<img class="banner-carousel" src="https://picsum.photos/200" />
<div class="banner-name">
Curabitur sitamet
</div>
<div class="banner-price">
<span class="economy">₱ </span><span class="price">300</span>
</div>
</div>
<div class="carousel-item col active">
<img class="banner-carousel" src="https://picsum.photos/200" />
<div class="banner-name">
Curabitur sitamet
</div>
<div class="banner-price">
<span class="economy">₱ </span><span class="price">300</span>
</div>
</div>
<div class="carousel-item col active">
<img class="banner-carousel" src="https://picsum.photos/200" />
<div class="banner-name">
Curabitur sitamet
</div>
<div class="banner-price">
<span class="economy">₱ </span><span class="price">300</span>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-2" 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="#carousel-2" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>But no luck about doing this that i wanted to be