BLOG

In the press section slider using Slick (CDN Link Slick slider and jQuery)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<!-- slick cdn links -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

 

 

/* Section Code */

 

 

<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}

{% if section.blocks.size > 0 %}
<ul class="cat-slider logo-bar{% if section.settings.title_enable %} logo-bar--large{% endif %}">
{% for block in section.blocks %}
<li class="logo-bar__item{% if section.settings.title_enable %} logo-bar__item--large{% endif %}" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" class="logo-bar__link">
{% endif %}
{% if block.settings.image != blank %}
{{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
{% else %}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.link != blank %}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}

{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>

<script>
$('.cat-slider').slick({
arrows: false,
infinite: true,
autoplay: true,
autoplaySpeed: .1,
slidesToShow: 7,
autoplaySpeed: 0,
cssEase: 'linear',
speed: 2000,
responsive: [
{
breakpoint: 768,
settings: {
centerMode: false,
centerPadding: '40px',
slidesToShow: 6
}
},
{
breakpoint: 480,
settings: {
centerMode: false,
centerPadding: '40px',
slidesToShow: 3
}
}
]
});
</script>

{% schema %}
{
"name": {
"cs": "Seznam log",
"da": "Logoliste",
"de": "Logo-Liste",
"en": "Press Logo list",
"es": "Lista de logos",
"fi": "Logoluettelo",
"fr": "Liste des logos",
"it": "Elenco loghi",
"ja": "ロゴリスト",
"ko": "로고 목록",
"nb": "Logoliste",
"nl": "Logolijst",
"pl": "Lista logo",
"pt-BR": "Lista de logos",
"pt-PT": "Lista de logótipos",
"sv": "Logotyplista",
"th": "รายการโลโก้",
"tr": "Logo listesi",
"vi": "Danh sách logo",
"zh-CN": "logo 列表",
"zh-TW": "標誌清單"
},
"class": "index-section",
"max_blocks": 1000,
"settings": [
{
"type": "text",
"id": "title",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"en": "Press Logo list"
}
}
],
"blocks": [
{
"type": "logo_image",
"name": {
"en": "Press Logo"
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
{
"type": "url",
"id": "link",
"label": {
"cs": "Odkaz",
"da": "Link",
"de": "Link",
"en": "Link",
"es": "Enlace",
"fi": "Linkki",
"fr": "Lien",
"it": "Link",
"ja": "リンク",
"ko": "링크",
"nb": "Kobling",
"nl": "Link",
"pl": "Link",
"pt-BR": "Link",
"pt-PT": "Ligação",
"sv": "Länk",
"th": "ลิงก์",
"tr": "Bağlantı",
"vi": "Liên kết",
"zh-CN": "链接",
"zh-TW": "連結"
},
"info": {
"cs": "Volitelné",
"da": "Valgfri",
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fi": "Valinnainen",
"fr": "Facultatif",
"it": "Facoltativo",
"ja": "オプション",
"ko": "선택 사항",
"nb": "Valgfritt",
"nl": "Optioneel",
"pl": "Opcjonalnie",
"pt-BR": "Opcional",
"pt-PT": "Opcional",
"sv": "Valfritt",
"th": "ไม่จำเป็น",
"tr": "İsteğe bağlı",
"vi": "Không bắt buộc",
"zh-CN": "可选",
"zh-TW": "(選填)"
}
}
]
}
],
"presets": [
{
"name": {
"en": "In Press"
},
"category": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
},
"blocks": [
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
}
]
}
]
}
{% endschema %}

Share:

Post a Comment!