SwissUpLabs Logo

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.

    Pages grid

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

    Homepage content with slides

  3. Wrap images into div with specified slick parameters:

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

    Homepage conent with slider

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

    Basic Carousel at the homepage

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.

    Block's grid

  2. Find a widget that inserts product listing block.

    Product listing widget

  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>
    

    Product listing widget wrapped with slider

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

    Product listing carousel

Parameters

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

Next up
Edit this Page