[SOLVED] Carousel conflict in OC 3.0.3.8
Posted: Mon Oct 03, 2022 1:31 pm
We use OC 3.0.3.8
I have the feeling that when displaying multiple carousels there are conflicts - be it in javascript or in jQuery.
On the home page of our not yet opened store we have under: Desgin > Layouts > Home activated:
1. home page slideshow
2. sponsors banner
and now as 3. the owl-carousell for "Sellers latest products
Everything works except for the "latest products" extension
I uninstalled the extension and reinstalled it.
Then performed the refresh under customizations.
Nothing changes.
Only the headline "Sellers latest products" is displayed but the expected carousel does not appear.
I then added new products in a vendor store.
NOTHING appears in the carousel.
Does anyone have a solution?
I have also installed the latest version of the owl-carousel (2.3.4).
The code in the page looks like this:
<script type="text/javascript"><!--
$(document).ready(function(){
$("#carousel_latest").owlCarousel({
items:4,
margin:10,
autoPlay: 3000,
navigation:true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination:true,
responsiveClass:true,
responsive:{
0:{
items:1,
},
768:{
items:3,
margin:20,
},
1024:{
items:4,
margin:20,
}
},
});
});
--></script>
I have the feeling that when displaying multiple carousels there are conflicts - be it in javascript or in jQuery.
On the home page of our not yet opened store we have under: Desgin > Layouts > Home activated:
1. home page slideshow
2. sponsors banner
and now as 3. the owl-carousell for "Sellers latest products
Everything works except for the "latest products" extension
I uninstalled the extension and reinstalled it.
Then performed the refresh under customizations.
Nothing changes.
Only the headline "Sellers latest products" is displayed but the expected carousel does not appear.
I then added new products in a vendor store.
NOTHING appears in the carousel.
Does anyone have a solution?
I have also installed the latest version of the owl-carousel (2.3.4).
The code in the page looks like this:
<script type="text/javascript"><!--
$(document).ready(function(){
$("#carousel_latest").owlCarousel({
items:4,
margin:10,
autoPlay: 3000,
navigation:true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination:true,
responsiveClass:true,
responsive:{
0:{
items:1,
},
768:{
items:3,
margin:20,
},
1024:{
items:4,
margin:20,
}
},
});
});
--></script>