JS Animated. 如何管理猫头鹰旋转木马

本教程展示了如何管理 Owl Carousel 在JS动画模板:

1. Inspect carousel 使用检查器在Chrome或 Firebug in Firefox browser. 我们可以看到那只猫头鹰 carousel 在本节中使用:

   

2. 中打开相应的索引文件 editor. 使用搜索搜索适当的代码部分 function of your editor:

   

3. 为了增加更多的项目，你应该复制原项目的代码:

   

4. Paste the code. 确保保持编码结构. 更改文本和图像:

   

5. 保存更改，将更新后的文件上传到服务器. Refresh page. 我们增加了一个新项目:

   

6. 为了改变 carousel options, data 属性。. 控件上的属性是如何定义的 screenshot below:

   

7. Carousel 播放配置. 为了使 slider 你应该使用自动播放 data-autoplay data attribute:

   

8. 为了显示“上一步”/“下一步” navigation in Owl Carousel，你应该使用对应的 data-nav="true" 的数据属性 carousel. 这样的属性定义在 carousel，请参阅 screenshot.

   You can disable navigation by specifying false instead of true.

9. Owl carousel 允许一次显示一个或几个项目. 为了管理 carousel 项显示时，应使用相应的data属性 数据项和数据*项. 请查看模板文档以获取更详细的信息. We have added data-lg-items = " 1 " and data-md-items = " 1 " attributes:

   

   现在两个项目同时出现了

   

10. 让我们看看另一只猫头鹰 carousel works. 我们已经检查过了 carousel 在Chrome中使用检查器. 这些内容由owl提供 carousel as well. Navigation 不显示，图像有一个 lightbox:

    

11. 找到适当的代码部分. 属性数据阶段填充定义 carousel scene padding. 它可以应用于不同分辨率的设备. Attribute data-lightbox 控件将使用的库 lightbox:

    

12. 下面的代码定义了特定项目的动画:

    

13. You can remove lightbox 从特定的图像. 只要去掉对 lightbox image. 删除以下代码:

    

14. 请检查模板 documentation 获取更多详细信息(Extensions - Owl) Carousel).

请随时查看下面的详细视频教程: