我正在尝试在主页中实现一个光滑的轮播。轮播的幻灯片作为 block 添加到 slider 部分中。我已经在我的 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' %}
最佳答案
**Image id is different from Schema image id**
---- 该 slider 正在工作 ----
<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 %}
关于javascript - 带有动态图像 block 的 Shopify 光滑轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72295915/