带有动态图像块的 Shopify 光滑轮播

Question

我正在尝试在主页中实现一个漂亮的轮播。轮播的幻灯片作为滑块部分中的块添加。我已经在我的 theme.liquid 文件中添加了所需的 css、js 和 jquery cdn。在 shopify 的自定义选项中，我现在可以为幻灯片添加动态图像，但轮播或图像未显示在网站上。

这是我的 theme.liquid 文件：

<!doctype html>
<html>
<head>

  <title>{{ page_title }}</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="{{ page_description | escape }}">
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  
  <!--css file-->
  <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}" type="text/css" media="print" onload="this.media='all';onLoadStylesheet()">
  
  <!--slick css?-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  {{ content_for_header }}
</head>

<body>
  {% section 'header' %}

  <main role="main">
    {{ content_for_layout }}
  </main>

  <!--slick jquery and js-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

我的slider.liquid文件：

<div class="slider-container">
    <div class="image-container">
        {% for slide in settings.blocks %}
            <div class="image-title">
                {{ slide.slide_title }}
            </div>

            <div class="slider-image">
                <img src="{{ slide.slide_img | img_url: 'grande' }}">
            </div>

        {% endfor %}
    </div>

    <div class="slider-next">Next</div>
    <div class="slider-prev">Prev</div>
</div>

<script>
    $('.slider-container').slick({
      dots: false,
      infinite: true,
      speed: 300,
      slidesToShow: 5,
      slidesToScroll: 5,
      nextArrow:$('.slider-next'),
      prevArrow:$('.slider-prev'),
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: false
  
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
  </script>

{% schema %}
{
  "name": "Slideshow",
  "tag": "section",
  "class": "slideshow",
  "max_blocks": 5,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Slideshow"
    }
  ],
  "blocks": [
     {
       "name": "Slide",
       "type": "slide",
       "settings": [
         {
           "type": "image_picker",
           "id": "slide_image",
           "label": "Image"
         }, 
         {
            "type": "text",
            "id":"slide_title",
            "label":"Title"
         }
       ]
     }
   ],
  "presets": [
     {
       "name": "Slideshow",
       "settings": {
          "title": "Slideshow"
        },
       "blocks": [
         {
           "type": "slide"
         },
         {
           "type": "slide"
         }
       ]
     }
   ]
}
{% endschema %}

我的 index.liquid 文件：


{{ content_for_index }}

{% section 'slider' %}

Answer 1

**Image id is different from Schema image id**

---- 这个滑块起作用了 ----

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="slider-container">
    <div class="image-container Pre_slide">
        {% for block in section.blocks %}
            <div class="image-title">
                {{ block.settings.slide_title }}
            </div>

            <div class="slider-image">
                <img src="{{ block.settings.slide_image | img_url: 'master' }}">
            </div>

        {% endfor %}
    </div>

    <div class="slider-next">Next</div>
    <div class="slider-prev">Prev</div>
</div>

<script>
    $('.Pre_slide').slick({
      dots: false,
      infinite: true,
      speed: 300,
      slidesToShow: 2,
      slidesToScroll: 1,
      nextArrow:$('.slider-next'),
      prevArrow:$('.slider-prev'),
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: false
  
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
  </script>

{% schema %}
{
  "name": "Slideshow",
  "tag": "section",
  "class": "slideshow",
  "max_blocks": 5,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Slideshow"
    }
  ],
  "blocks": [
     {
       "name": "Slide",
       "type": "slide",
       "settings": [
         {
           "type": "image_picker",
           "id": "slide_image",
           "label": "Image"
         }, 
         {
            "type": "text",
            "id":"slide_title",
            "label":"Title"
         }
       ]
     }
   ],
   "presets": [
    {
      "name": "Custom Slider"
    }
  ]
  }
{% endschema %}

带有动态图像块的 Shopify 光滑轮播

Shopify slick carousel with dynamic image blocks

javascript

liquid

carousel

shopify

slick.js