Collection slider using slick js

collection-slider.liquid

{%- assign collection = collections[section.settings.collection] -%}

<div class="wrapper collection-slider collection-slider-{{ section.id }}" data-section-id="{{ section.id }}">
    {% if section.settings.primary_header != blank or section.settings.secondary_header %}
        <h2><span class="font-300">{{section.settings.primary_header}}</span> {{section.settings.secondary_header}}</h2>
    {% endif %}
    

    <div class="grid-uniform collection-slider-container">
        {% for product in collection.products %}
            {%- assign product_img_url = product.featured_image.src | img_url: 'master' -%}

            {%- assign on_sale = false -%}
            {%- if product.compare_at_price > product.price -%}
            {%- assign on_sale = true -%}
            {%- endif -%}

            {%- assign sold_out = true -%}
            {%- if product.available -%}
            {%- assign sold_out = false -%}
            {%- endif -%}

            <div class="grid__item  small--one-whole medium--one-third large--one-third">
                <a href="{{ product.url | within: collection }}" class="grid__image">
                    <img src="{{ product_img_url }}" alt="{{ product.featured_image.alt | escape }}">
                    {{ sticker }}
                </a>
                <h3><a href="{{product.url | within: collection}}">{{product.title | capitalize}}</a></h3>
                <p class="price_wrapper">
                    <span class="price{% if on_sale %} on-sale{% endif %}">
                    {% if product.price_varies %}{{ 'products.general.from' | t }} {% endif %}
                    <span class="money">{{ product.price | money }}</span>
                    </span>
                    {% if sold_out %}
                    <br /><em>{{ 'products.product.sold_out' | t }}</em>
                    {% endif %}
                    {% if on_sale %}
                    <span class="compare-at">
                        <span class="money">{{ product.compare_at_price | money }}</span>
                    </span>
                    {% endif %}
                </p>
                <a href="{{product.url | within: collection}}" class="btn--large btn btn--clear btn--square uppercase">
                    Add To Cart
                </a>
            </div>
        {% endfor %}
    </div>

</div>

<style>
.collection-slider h2 {
    text-align: center;
}

.collection-slider h3 {
    text-transform: capitalize;
    text-align: center;
    margin: 0 auto;
}

.collection-slider img {
    margin-bottom: 20px;
}

.collection-slider .price_wrapper {
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
}

.collection-slider .slick-track{
    display: flex;
    text-align: center;
}

.collection-slider .slick-prev, .collection-slider .slick-next {
    top:35%;
}

.collection-slider .slick-next {
    right: -50px;
}

.collection-slider .slick-prev{
    left: -15px;
}

</style>

<script>

(function($){

    $(document).ready(function(){
        $('.collection-slider-container').slick({
            infinite: false,
            slidesToShow: 3,
            slidesToScroll: 1
        });
    });

})(jQuery);

</script>

{% schema %}
{
    "name": "Collection slider",
    "settings": [
        {
            "type": "text",
            "id": "primary_header",
            "label": "Primary header text (light text)"
        },
        {
            "type": "text",
            "id": "secondary_header",
            "label": "Secondary header text (bold text)"
        },
        {
            "id": "collection",
            "type": "collection",
            "label": "Collection"
        }
    ],
    "presets": [
        {
            "name": "Collection slider",
            "category": "Collection"
        }
    ]
}
{% endschema %}