如何在 Shopify Brooklyn Theme 的主页上安装产品轮播?
How to install product carousel on homepage on Shopify Brooklyn Theme?
我正在尝试将特色产品更改为 Shopify - Brooklyn 主题主页上的轮播。我在这里遵循了一些应该适用于布鲁克林主题的说明:https://www.youtube.com/watch?v=r7I3T4wB2cQ
然而,当我安装它时,旋转木马是垂直的。这是我的商店:http://sacredcoffeeco.com -- 旋转木马在页面底部。
有谁知道如何使滑块水平?
谢谢!
您似乎没有将滑块 JS 初始化到新创建的 HTML,您需要将代码添加到您的 theme.js.liquid
并且还需要对 CSS 代码进行一些更改以进行设计目的。
$('ul.slick').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
我正在尝试将特色产品更改为 Shopify - Brooklyn 主题主页上的轮播。我在这里遵循了一些应该适用于布鲁克林主题的说明:https://www.youtube.com/watch?v=r7I3T4wB2cQ
然而,当我安装它时,旋转木马是垂直的。这是我的商店:http://sacredcoffeeco.com -- 旋转木马在页面底部。
有谁知道如何使滑块水平?
谢谢!
您似乎没有将滑块 JS 初始化到新创建的 HTML,您需要将代码添加到您的 theme.js.liquid
并且还需要对 CSS 代码进行一些更改以进行设计目的。
$('ul.slick').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});