COLLECTION SLIDER

---------------------------------------------------------------------------------------------------------------------------
ADD COLLECTION SLIDER CODE 
READ MORE:
https://www.youtube.com/watch?v=7yVGm9hVhyI
--------------------------------------------------------------------------------------------------------------------------
ADD SECTION  NAME
------------------------------------------------------------------------------------------------------------------------
{% schema %}
{
"name": "Section name",
"settings": [],
"presets": [
{
"name": {
"en": "Featured Collection Slider🍣"
},
"category": {
"en": "Collection💥"
}
}
]
}
{% endschema %}
​
{% stylesheet %}
{% endstylesheet %}
​
{% javascript %}
{% endjavascript %}

---------------------------------------------------------------------------------------------------------------------------------------------
<div class="page-width">
<style>
.slick-dots {/* position: absolute; bottom: -3.5rem; */ display: block; padding: 0; margin: 0; list-style: none; line-height: 0;}
.slick-dots li {position: relative; display: inline-block; width: 0.9375rem; height: 0.9375rem; margin: 0 0.875rem; padding: 0; cursor: pointer;}
.slick-dots li:first-child {margin-left: 0;}
.slick-dots li:last-child {margin-right: 0;}
.slick-dots li button {font-size: 0; line-height: 0; display: block; width: 0.9375rem; height: 0.9375rem; padding: 0.3125rem; cursor: pointer; color: transparent; outline: none; border:none; background: rgba(47, 31, 22, 0.5); border-radius: 50%;}
.slick-dots li button:hover,
.slick-dots li button:focus,
.slick-dots li.slick-active button {outline: none; background-color: #2d1d15; transition: all 300ms ease 0s; color: #2d1d15;}
</style>
<style>  
.collection-slider .slick-track {
display: flex;
}
.collection-slider .product-card {
width: 100%;
}
.collection-slider .slick-prev {
left: 0;
z-index: 999;
}
.collection-slider .slick-next {
right: 0;
z-index: 999;
}
.collection-slider {
padding: 25px;
overflow: hidden;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.collection-slider').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1
});
})
</script>
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}
{%- assign collection = collections[section.settings.collection] -%}
{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}
{%- assign product_limit = 12 -%}
<ul data-slides="{{section.settings.grid}}"class="grid grid--uniform grid--view-items collection-slider">
{% for product in collection.products limit: product_limit %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid', max_height: max_height %}
</li>
{% else %}
{% for i in (1..product_limit) %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
<div class="grid-view-item product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="#">
<span class="visually-hidden">{{ 'homepage.onboarding.product_title' | t }}</span>
</a>
<div class="grid-view-item__image-wrapper">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title" aria-hidden="true">{{ 'homepage.onboarding.product_title' | t }}</div>
{% include 'product-price' %}
</div>
</li>
{% endfor %}
{% endfor %}
</ul>
{% if section.settings.show_view_all %}
<hr class="hr--invisible" aria-hidden="true" />
<div class="text-center">
<a href="{{ collection.url }}" class="btn" aria-label="{{ 'collections.general.view_all_label' | t: collection_name: collection.title }}">
{{ 'collections.general.view_all' | t }}
</a>
</div>
{% endif %}
</div>
{% schema %}
{
"name": {
"de": "Featured Kategorie",
"en": "Collection Slider😺",
"es": "Colección destacada",
"fr": "Collection vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"pt-BR": "Coleção em destaque"
},
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "En-tête",
"it": "Heading",
"ja": "見出し",
"pt-BR": "Título"
},
"default": {
"de": "Featured Kategorie",
"en": "Featured collection",
"es": "Colección destacada",
"fr": "Collection vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"pt-BR": "Coleção em destaque"
}
},
{
"id": "collection",
"type": "collection",
"label": {
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"pt-BR": "Coleção"
}
},
{
"type": "range",
"id": "grid",
"label": {
"de": "Produkte per Reihe",
"en": "Products per row",
"es": "Productos por fila",
"fr": "Produits par rangée",
"it": "Prodotti per riga",
"ja": "行あたりの商品数",
"pt-BR": "Produtos por linha"
},
"min": 2,
"max": 5,
"step": 1,
"default": 3
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"de": "Produkt-Lieferanten anzeigen",
"en": "Show product vendors",
"es": "Mostrar proveedores del producto",
"fr": "Afficher les vendeurs",
"it": "Mostra fornitori prodotto",
"ja": "商品の販売元を表示する",
"pt-BR": "Exibir fornecedores do produto"
},
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"label": {
"de": "'Alle anzeigen' Button anzeigen",
"en": "Show 'View all' button",
"es": "Mostrar el botón 'Ver todo'",
"fr": "Afficher le bouton “Tout voir”",
"it": "Mostra il pulsante \"Visualizza tutto\"",
"ja": "「すべて表示」ボタンを表示する",
"pt-BR": "Exibir botão 'Visualizar tudo'"
},
"default": false
}
],
"presets": [
{
"name": {
"de": "Featured Kategorie",
"en": "Featured Collection Slider 🍣",
"es": "Colección destacada",
"fr": "Collection vedette",
"it": "Collezione in evidenza",
"ja": "特集コレクション",
"pt-BR": "Coleção em destaque"
},
"category": {
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"pt-BR": "Coleção"
}
}
]
}
{% endschema %}
 
---------------------------------------------------------------------------------------------------------------------------------------------