Featured collection carousel

<!--HC- Added collection list-17 May'19-->
  <div class="relative">
    <div class="swiper-container">
    <div class="swiper-wrapper">
    {% for block in section.blocks %}
        {%- assign collection = collections[block.settings.feature_collection] -%}
    <div class="swiper-slide">
      					{%- assign image_size = '600x' -%}

					
					    <a href="{{ collection.url }}" style="background-image:url('{{ collection | img_url: image_size , crop: 'center' }}');" class="padding">
                          <span>{{ collection.title }}</span>
					    </a>
					
      </div>
    {% endfor %}
      

      </div>
     
    </div>
         <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
{% schema %}
{
  "name": "Collection list",
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
       {
   		"type": "collection",
   		"id": "feature_collection",
   		"label": "Feature collection"
	   }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collection list",
      "category": "Image",
      "blocks": [
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
         breakpoints: {
      
        768: {
          slidesPerView: 4,
          spaceBetween: 30,
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1,
          spaceBetween: 10,
        }
      }
    });
  </script>