Shopify. 如何管理滑块设置(速度、效果、自动滑块切换)

Shopify. 如何管理滑块设置(速度、效果、自动滑块切换)

从这个教程中，您将学习如何在Shopify模板中管理滑块设置.

1. 我们的Shopify模板使用NivoSlider，其设置在代码中指定. 您可以检查该页面的源代码，以找到连接滑块的脚本. 右键单击 (右击)并选择 “查看页面代码” (查看页面代码):

   

2. 使用单词找到相应的代码片段 слайдер (slider) для поиска. 接下来，使用组合键 CTRL+F来打开一个扑克牌. 在这个截图中，你可以看到这段代码是什么样子的:

   

3. 现在您需要更改模板文件中的滑块设置值. 打开管理面板，进入分区 Темы (themes). 修改文件:

   

4. 在这个例子中，代码在一个文件中 snippet-js-footer.liquid. 找到相应的代码片段. 您可以在这里更改滑块设置:

   

5. 在这个文件中，你可以修改 动画速度，暂停时间 (动画速度，暂停时间)和其他设置. 我们还可以改变动画效果. 以下是可用的效果列表. 你可以选择其中一个:

   • sliceDown
   • sliceDownLeft
   • sliceUp
   • sliceUpLeft
   • sliceUpDown
   • sliceUpDownLeft
   • fold
   • fade
   • random
   • slideInRight
   • slideInLeft
   • boxRandom
   • boxRain
   • boxRainReverse
   • boxRainGrow
   • boxRainGrowReverse

6. Мы изменили эффект (effect), 动画速度和暂停时间 (动画速度和暂停时间):

   

7. 默认幻灯片自动切换. 您可以通过添加以下参数来禁用自动滑块切换:

   manualAdvance: true

   

8. 保存更改并检查您的网站.

你也可以在下面观看详细的视频:

Shopify. 如何管理滑块设置(速度、效果、自动滑块切换)