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

前言

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=“”.

姓名	类型	默认	描述
间隔	数字	5000	自动循环项目之间的延迟时间。如果为 false，carousel 将不会自动循环。
暂停	字符串	空值	“徘徊”
裹	布尔值	真的	转盘是否应连续循环或硬停止。
键盘	布尔值	真的	轮播是否应对键盘事件做出反应。

方法

.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…
})