SwissUpLabs Logo

Slick Carousel Usage

Contents

  1. Basic Usage (Static content carousel)
  2. Advanced Usage (Product listing carousel)
  3. Lazy Loading
  4. Responsive Display
  5. Using in Argento
  6. Slick Carousel parameters
  7. Slick Carousel arrow classes

Basic Usage

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

  1. Navigate to CMS > 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 gray" data-slick='{"slidesToShow": 5, "slidesToScroll": 1, "infinite": true, "swipeToSlide": true}'>
        ...
    </div>
    

    Homepage content with slider

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

    Basic Carousel at the homepage

Advanced Usage

Let’s insert Catalog New Products List widget to homepage and transform it into Slick Carousel. We’ll use slickwrapper plugin to call a carousel on a dynamically generated content.

  1. Navigate to CMS > Pagesand select homepage.

  2. Insert new product listing widget.

    {{widget type="catalog/product_widget_new" display_type="all_products" products_count="20" template="catalog/product/widget/new/content/new_grid.phtml"}}
    
  3. Add new column_count paramether to widget and set it value to be equal to products_count

    {{widget type="catalog/product_widget_new" display_type="all_products" products_count="20" column_count="20" template="catalog/product/widget/new/content/new_grid.phtml"}}
    
  4. Wrap this widget into div with el option and specified slick parameters:

    <div class="slick-wrapper gray" data-slick-wrapper='{"el": ".products-grid", "slidesToShow": 5, "slidesToScroll": 5, "dots": true}'>
        ...
    </div>
    

    Product listing widget wrapped with slider

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

    Product listing carousel

Lazy Loading

You can use Slick lazy loading feature for static content carousels. To do it, simply remove image src attribute and place image url in data-lazy attribute. Also you need to add style="width: 100%;" for every image:

<div class="slick gray" data-slick='{"slidesToShow": 5, "slidesToScroll": 1, "infinite": true, "swipeToSlide": true}'>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/Accessoriesbagimg.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/accessorieseyewearimg.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/accessoriesshoesimg.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/acessoreiesjeweleryimg.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/clp-sub-m-shirts.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/home_bed_bathimg.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/Homecatimg-decor.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/Homecatimg-electronics.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/mencat-newarrivalsimg.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/mencat-pants.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/Mencat-shirtsimg.png"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/Mencat-teesimg.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/Womennewarrivalsimg.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/Womenpantsimg.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/Womenskirtsimg.jpg"}}" /></div>
    <div><img style="width: 100%;" data-lazy="{{media url="wysiwyg/Womentopsimg.jpg"}}" /></div>
</div>

Responsive Display

Slick responsive display feature allows you to set different slider options for different screen sizes.

For example, with the following code:

<div class="slick-wrapper gray" data-slick-wrapper='{"el": ".products-grid", "slidesToShow": 5, "slidesToScroll": 5, "dots": true, "responsive": [ {"breakpoint": 770, "settings": {"slidesToShow": 4, "slidesToScroll": 4}}, {"breakpoint": 640, "settings": {"slidesToShow": 3, "slidesToScroll": 3}}, {"breakpoint": 480, "settings": {"slidesToShow": 2, "slidesToScroll": 2}}, {"breakpoint": 321, "settings": {"slidesToShow": 1, "slidesToScroll": 1, "dots": false}}]}'>
    {{widget type="catalog/product_widget_new" display_type="all_products" products_count="20" column_count="20" template="catalog/product/widget/new/content/new_grid.phtml"}}
</div>

slider will be looking like this:

Using in Argento

Argento theme version 1.8.3 comes with custom styles for Slick product carousels.

Examples:

Parameters

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

Arrow Classes

Default slider arrows color is white. When you use slider on the page with white background, arrows will be not visible. To change arrows color, you can add following css classes to slider wrapper:

Edit this Page