python测试开发django-191.Bootstrap3 轮播图（Carousel）（python测试开发面试题）

python测试开发django-191.Bootstrap3 轮播图（Carousel）（python测试开发面试题）

前言

Bootstrap3 实现轮播图滚动显示

轮播图（Carousel）

只需替换成自己本地图片​​/static/a1.png​​即可实现轮播图

demo1

demo2

demo3

Previous Next

实现效果

可选字幕

使用​​.carousel-caption​​任何​​.item​​. 在那里放置几乎任何可选的 HTML，它将自动对齐和格式化。

...

...

用法

多个轮播

轮播需要在id最外面的容器 (the .carousel) 上使用 ，以便轮播控件正常运行。添加多个轮播或更改轮播时id，请务必更新相关控件。

通过数据属性

使用数据属性轻松控制轮播的位置。data-slide接受关键字prevor next，它改变相对于当前位置的幻灯片位置。或者，使用data-slide-to将原始幻灯片索引传递给 carousel data-slide-to="2"，这会将幻灯片位置移动到以 开头的特定索引0。

该data-ride="carousel"属性用于将轮播标记为在页面加载时开始动画。它不能与同一轮播的（冗余和不必要的）显式 JavaScript 初始化结合使用。

通过 JavaScript,手动调用轮播：

$('.carousel').carousel()

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 中data-，如data-interval="".

方法

.carousel(options)

使用可选选项初始化轮播object并开始循环浏览项目。

$('.carousel').carousel({ interval: 2000})

.carousel('cycle')

从左到右循环浏览轮播项目。

.carousel('pause')

停止轮播在项目中循环。

.carousel(number)

将轮播循环到特定帧（基于 0，类似于数组）。

.carousel('prev')

循环到上一个项目。

.carousel('next')

循环到下一个项目。

活动

Bootstrap 的 carousel 类公开了两个用于连接 carousel 功能的事件。

这两个事件都具有以下附加属性：

direction：轮播的滑动方向（"left"或"right"）。relatedTarget：作为活动项滑入到位的 DOM 元素。

所有轮播事件都在轮播本身（即在​​

​​）触发。

事件类型	描述
slide.bs.carousel	slide调用实例方法时立即触发此事件。
slide.bs.carousel	当轮播完成其幻灯片转换时会触发此事件。

$('#myCarousel').on('slide.bs.carousel', function () { // do something…})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。