JS Animated. 如何管理猫头鹰旋转木马
2016年1月21日
JS Animated. 如何管理猫头鹰旋转木马
本教程展示了如何管理 Owl Carousel 在JS动画模板:
Inspect carousel 使用检查器在Chrome或 Firebug in Firefox browser. 我们可以看到那只猫头鹰 carousel 在本节中使用:
-
中打开相应的索引文件 editor. 使用搜索搜索适当的代码部分 function of your editor:
-
为了增加更多的项目,你应该复制原项目的代码:
-
Paste the code. 确保保持编码结构. 更改文本和图像:
-
保存更改,将更新后的文件上传到服务器. Refresh page. 我们增加了一个新项目:
-
为了改变 carousel options, data 属性。. 控件上的属性是如何定义的 screenshot below:
-
Carousel 播放配置. 为了使 slider 你应该使用自动播放 data-autoplay data attribute:
-
为了显示“上一步”/“下一步” navigation in Owl Carousel,你应该使用对应的
data-nav="true"
的数据属性 carousel. 这样的属性定义在 carousel,请参阅 screenshot.You can disable navigation by specifying false instead of true.
-
Owl carousel 允许一次显示一个或几个项目. 为了管理 carousel 项显示时,应使用相应的data属性 数据项和数据*项. 请查看模板文档以获取更详细的信息. We have added data-lg-items = " 1 " and data-md-items = " 1 " attributes:
现在两个项目同时出现了
-
让我们看看另一只猫头鹰 carousel works. 我们已经检查过了 carousel 在Chrome中使用检查器. 这些内容由owl提供 carousel as well. Navigation 不显示,图像有一个 lightbox:
-
找到适当的代码部分. 属性数据阶段填充定义 carousel scene padding. 它可以应用于不同分辨率的设备. Attribute data-lightbox 控件将使用的库 lightbox:
-
下面的代码定义了特定项目的动画:
-
You can remove lightbox 从特定的图像. 只要去掉对 lightbox image. 删除以下代码:
-
请检查模板 documentation 获取更多详细信息(Extensions - Owl) Carousel).
请随时查看下面的详细视频教程:
JS Animated. 如何管理猫头鹰旋转木马