Slick Carousel Usage

Contents

1. Basic Usage (Static content carousel)
2. Advanced Usage (Product listing carousel)
3. Slick Carousel parameters

Basic Usage

Let’s add a nice static carousel to the Argento’s homepage. We’ll use a slick plugin to call a carousel on a static content.

1. Navigate to Content > Pages and select appropriate homepage.

   

2. Insert slider images using “Insert Image…” button.

   

3. Wrap images into div with specified slick parameters:

   <div class="slick-slider" data-mage-init='{"slick": {"slidesToShow": 2, "swipeToSlide": true, "centerMode": true, "rows": 0}}'>
       ...
   </div>
   

   

4. Save the page and navigate to your homepage frontend:

   

Advanced Usage

Let’s transform Luma’s homepage product listing block into Slick Carousel. We’ll use slickwrapper plugin to call a carousel on a dynamically generated content.

1. Navigate to Content > Blocksand select Luma’s homepage block.

   

2. Find a widget that inserts product listing block.

   

3. Wrap this widget into div with el option and specified slick parameters:

   <div data-mage-init='{"slickwrapper": {"el": ".product-items", "slidesToShow": 5, "slidesToScroll": 5, "dots": true}}'>
       ...
   </div>
   

   

4. Save the page and navigate to your homepage frontend:

   

Parameters

Full list of available options and examples is available at slick’s carousel official site.

Next up

• Back to docs homepage
• Lazy Load