slick-slider.liquid

{{ "slick.css" | asset_url | stylesheet_tag }}
{{ "slick-theme.css" | asset_url | stylesheet_tag }}
{{ "slick-slider.css" | asset_url | stylesheet_tag }}

<h1 class="slick__carousel--header">{{ section.settings.heading }}</h1>

    <div class="slick__carousel--container">
    {%- for block in section.blocks -%}
      <div class="slick__carousel--exterior">
        <div class="slick__carousel--interior">
        
          <div class="slick__carousel--quote">
          <p >
            {{ block.settings.title }}
          </p>
          </div>
          <img
            class="slick__carousel--portrait"
            src="{{ block.settings.image | img_url: 'master'}}"
          />
          <h4 class="slick__carousel--name">{{ block.settings.description }}</h4>
        </div>
      </div>
    {% endfor %}
    </div>
    
    {{ "jquery-1.11.0.min.js" | asset_url | script_tag }}
    {{ "jquery-migrate-1.2.1.min.js" | asset_url | script_tag }}
    {{ "slick.min.js" | asset_url | script_tag }}  
    


<script>
  $(".slick__carousel--container").slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 989,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        dots: true
      },
    },
    {
      breakpoint: 750,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true
      },
    },
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ],
});

    </script>

{% schema %}
  {
    "name": "Slick Slider",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label" : "Heading",
        "default" : "My Custom Heading"
      }
    ],
    "blocks" : [
      {
        "type" : "column",
        "name" : "slide",
        "settings" : [
          {
            "type" : "text",
            "id" : "title",
            "label" : "Title",
            "default" : "Title"
          },
          {
            "type": "image_picker",
            "id" : "image",
            "label" :  "Image"
          },
          {
            "type" : "text",
            "id" : "description",
            "label" : "Description",
            "default" : "Description"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Slick Slider"
      }
    ]
  }
{% endschema %}