The following tutorial is for the cases in which the library of Slick, Owl, Cycle or other carousel is already present on-site.
/* BEFORE EDITING THE UL CLASS */
</style>
<div class="nosto-block">
<h4 class="nosto-header">$!title</h4>
<ul class="nosto-list">
#foreach($product in $products)
<li class="nosto-list-item">
Recommended name of the class: nosto-carousel-$divID. In this example it is a placeholder ("class-of-the-carousel")
/* AFTER EDITING THE UL CLASS */
</style>
<div class="nosto-block">
<h4 class="nosto-header">$!title</h4>
<ul class="nosto-list class-of-the-carousel">
#foreach($product in $products)
<li class="nosto-list-item">
x
Add this script below the code (example for a Slick carousel):
<script type="text/javascript">
_targetWindow.jQuery(_targetWindow.document).ready(function(){
_targetWindow.jQuery("#$divId .class-of-the-carousel").slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
</script>
Please make sure that you use the right carousel for your slider library (Slick, Owl, Cycle).