I have implemented owl carousel to showcase products, where each product is displayed on a card with an 'add to cart' button. However, I am facing an issue where the 'add to cart' button on a cloned item does not trigger the click event.
I understand that there are numerous questions regarding this problem, and the common solution is to set the loop option to false. Nonetheless, I require the loop option to be enabled in my scenario.
loop: falseMoreover, the carousel click functionality is not working for me either,
$('.bstsrv-carousel').on('click', '.item', function () { alert("click"); });
Below is the code snippet for my carousel setup:
<div class="carousel-wrap">
<div class="owl-carousel owl-theme bstsrv-carousel">
<div class="product card" product-id="i" product-color="#D18B49" *ngFor="let item of packages; let i = index">
<div class="thumbnail">
<img src="../../assets/img/carousel/main/carousel1.jpg" />
</div>
<h1 class="title">{{ item.name }}</h1>
<div class="product-description stack-card-desc">
<ul>
<li *ngFor="let desc of item.desc">
{{ desc }}
</li>
</ul>
</div>
<div class="product-checkout-actions daily-offer-cart">
<button class="add-to-cart dailyoffer-add" *ngIf="!item.isInCart" name="'addtocart' + i"
(click)="AddToCart(item)">
Add to Cart
</button>
<button class="add-to-cart dailyoffer-add" *ngIf="item.isInCart" name="'removecart' + i"
(click)="removeCart(item)">
Remove
</button>
</div>
</div>
</div>
</div>
Here are the carousel options I have set:
$(".bstsrv-carousel").owlCarousel({
items: 3,
loop: true,
stagePadding: 0,
margin: 0,
autoplay: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
nav: true,
dots: false,
responsiveClass: true,
responsive: {
0: {
items: 3,
nav: true
}
}
});