Bootstrap中的图片轮播效果怎么实现

图片两侧的大于号和小于号就是上一个、下一个控件。

2.3 带指示器

指示器就是下图中三个白色的横杠，点击可直接切换到相应图片。

            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            Previous
            
            
            
            Next
            
            

2.4 带字幕

在任意carousel-item中使用carousel-caption替幻灯片添加字幕。可以选择使用display通用类别轻易地在较小的viewport上隐藏它们，如下所示，一开始将会用d-none隐藏，并使用d-md-block让它们在中型的设备上重新显示。

  
                
                
                
                
                
                
                
                
                
                  
第一个幻灯片
                  
一枝红艳露凝香，云雨巫山枉断肠。
——唐代李白的《清平调·其二》
                
                
                
                
                
                  
第二个幻灯片
                  
南国有佳人，容华若桃李。
——汉曹植的《杂诗七首·其四》
                
                
                
                
                
                  
第三个幻灯片
                  
云想衣裳花想容，春风拂槛露华浓。

                      ——唐代李白的《清平调·其一》
                
                
                
                
                
                Previous
                
                
                
                Next
                
                

2.5 淡入淡出

将carousel-fade加到carousel容器中，以使用淡入淡出的取代滑动的动画效果。 这部分就不演示了，包括后面两个，都是一个参数的事情。

2.6 设置时间间隔

在carousel-item上添加data-bs-interval=""以更改自动循环至下一个项目的延迟时间。 这个参数需要设置在每个arousel-item，时间单位是毫秒，如果设置间隔5秒，则为5000。下面是设置间隔10秒。

2.7 禁用触摸切换

轮播组件支持在触摸屏设备上左/右滑动以在幻灯片之间移动。这可以使用data-bs-touch属性禁用。下面的示例既不包括 data-bs-ride属性，并且具有data-bs-interval="false" ，因此它不会自动播放。

2.8 暗变型

在carousel上添加carousel-dark以获得暗色系的控制项、指示器及字幕。控件已透过CSS属性filter从它们预设的白色充填反转。字幕与控件具有用来自定义color及background-color的额外变量。

我们以22.2.4例子添加carousel-dark为例，查看效果

到此，相信大家对“Bootstrap中的图片轮播效果怎么实现”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！