All Collections
Recommendations
FAQ
How to add a carousel / slider to Nosto's recommendation slots
How to add a carousel / slider to Nosto's recommendation slots
Stanislav Kraus avatar
Written by Stanislav Kraus
Updated over a week ago

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).

Did this answer your question?