【问题标题】:Carousel Slider for Custom Theme in ShopifyShopify 中自定义主题的轮播滑块
【发布时间】:2016-08-09 09:31:00
【问题描述】:

我目前正在使用 Timber 框架在 Shopify 中创建一个自定义主题,其中一个要求是添加一个轮播滑块,该滑块将显示 3 个自动滑动的盒装图像,并具有左/右按钮以允许用户手动更改滑块。

我不确定我是否需要从头开始创建一些东西,所以我正在寻找一些关于如何解决这个问题的建议。

【问题讨论】:

  • 也许你可以使用 twiiter bootstrap carousel 滑块来满足你的所有条件。

标签: jquery css shopify


【解决方案1】:

我们通常会在 Shopify 主题上使用 http://owlgraphic.com/owlcarousel/。为了让您开始,以下内容应该可以帮助您启动并运行:

$(".owl-carousel").owlCarousel({
  'items': 1,
  'navigation': true,
  'navigationText': ['<','>'],
  'pagination': false
});

然后只需阅读文档以创建所需的元素。这个特殊的滑块启用了滑动,这对移动用户也很方便。

【讨论】:

  • 谢谢你,亚历克斯,我会试一试的。澄清一下,我可以在不同的页面上多次使用它吗?
  • 没错,如果每个轮播都有不同的设置,那么只需为每个轮播重复上述初始化函数并在 id 选择器上调用它,例如#mobile-carousel / #desktop-carousel
  • 谢谢亚历克斯:)
  • Alex 你是个明星,我已经设法将轮播添加到我的网站上,并且一切正常!
  • 顺便说一句,有什么办法可以将按钮移动到每一侧?
猜你喜欢
  • 1970-01-01
  • 2018-05-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-11
  • 1970-01-01
  • 2019-03-03
  • 1970-01-01
相关资源
最近更新 更多