Bootstrap 轮播

在本教程中，您将学习如何使用 Bootstrap 创建轮播。

使用 Bootstrap 创建轮播

轮播也称为幻灯片或图像滑块，是在网页的小空间内展示大量内容的最佳方式之一。它是一种动态的内容呈现方式，通过循环浏览多个项目，用户可以看到或访问文本和图像。

以下示例将向您展示如何使用 Bootstrap 轮播插件构建简单的轮播或幻灯片，其中包含上一个/下一个控件和指示器。

示例

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- 轮播指标 -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>

    <!-- 轮播项目的包装 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
        </div>
    </div>

    <!-- 轮播控件 -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

— 上面示例的输出将如下所示：

使用字幕创建轮播

您还可以使用任何 .carousel-item 中的 .carousel-caption 元素轻松为轮播幻灯片添加标题。您可以选择使用显示实用程序类来隐藏较小视口上的标题。

让我们试试下面的例子来了解它的基本工作原理：

示例

Try this code »

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- 轮播指标 -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>
    
    <!-- 轮播项目的包装 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some placeholder content for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some placeholder content for the third slide.</p>
            </div>
        </div>
    </div>

    <!-- 轮播控件 -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

— 上面示例的输出将如下所示：

提示： 上例中 .carousel-caption 元素上的 .d-none 和 .d-md-block 类使轮播字幕在中型设备上可见（即视口宽度 ≥768px），但在较小的视口上隐藏它们。

创建轮播的黑暗变体

您还可以将 .carousel-dark 添加到 .carousel 以创建更暗的控件、指示符和标题，以防幻灯片颜色变浅。我们来看一个例子：

示例

Try this code »

<div id="myCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <!-- 轮播指标 -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>

    <!-- 轮播项目的包装 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1-light.png" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/slide2-light.png" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/slide3-light.png" class="d-block w-100" alt="Slide 3">
        </div>
    </div>

    <!-- 轮播控件 -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

— 上面示例的输出将如下所示：

查看片段部分以获取一些设计精美的Bootstrap轮播的示例。

您还可以在轮播的各个幻灯片中添加标题或描述文本等标题，请查看下一节中的下一个示例。

通过数据属性激活轮播

使用 Bootstrap，您可以通过数据属性非常轻松地创建轮播，而无需编写任何 JavaScript 代码。我们来看下面的例子：

示例

Try this code »

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- 轮播指标 -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>

    <!-- 轮播项目的包装 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
        </div>
    </div>

    <!-- 轮播控件 -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

您可能想知道这段代码是关于什么的。好吧，让我们一一浏览这个轮播示例代码的每个部分，以便更好地理解。

代码说明

Bootstrap 轮播一般包含三个组件 — 轮播指示器（小矩形）、轮播控件（上一个和下一个箭头）和轮播项目或幻灯片。

每个轮播的最外层容器（即 .carousel 元素）需要一个唯一的 id（在我们的例子中为 id="myCarousel"），以便轮播指示器 (line no-4,5,6) 和轮播控件 (line no-23,26) 将其作为目标来运行适当地。
.carousel 元素的 data-bs-ride="carousel" 属性告诉Bootstrap程序在页面加载时立即开始动画轮播。
data-bs-slide-to 属性（line no-4,5,6）在单击时将幻灯片位置移动到特定项目（索引以 0 开头）特定的轮播指示器。
幻灯片在.carousel-inner（line no-10）中指定，每张幻灯片的内容在 .carousel-item 元素中定义，可以是文本和图像。
轮播控件上的 data-bs-slide 属性（line no-23,26）接受关键字 prev 或 next，这会改变相对于当前位置的幻灯片位置。

其余的事情是不言自明的，例如，.carousel 元素指定 Bootstrap 轮播，.carousel-indicators 元素指示轮播中有多少张幻灯片以及当前处于活动状态的幻灯片，.carousel-control-prev、.carousel-control-next 元素定义了在轮播幻灯片之间移动的上一个和下一个控件，等等。


				
                
					
						
						
							提示： 需要将 .active 类添加到其中一个轮播幻灯片（即在 .carousel-item 元素上），否则轮播将不可见。
						
					
				
				
				
				
					
						
						
							注意： .carousel 元素上的 .slide 类将 CSS 幻灯片过渡动画添加到轮播中，使轮播项目在显示新项目时滑动。
						
					
				
				
                
                通过 JavaScript 激活轮播
                您也可以使用 JavaScript 手动激活轮播 — 只需在 JavaScript 代码中使用包装器元素的 id 或 class 选择器 调用 carousel() 方法。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myCarousel").carousel();
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myCarousel");
    var myCarousel = new bootstrap.Carousel(element);
});
</script>
					
				
				
                
                
					
						
						
							提示：在您不希望轮播在页面加载时开始滑动或动画的情况下，通过 JavaScript 手动激活轮播会很有帮助。
						
					
				
				
                
                选项
                可以将某些选项传递给 carousel() Bootstrap 方法来自定义轮播的功能。 选项可以通过数据属性或 JavaScript 传递。
                对于通过数据属性设置模态选项，只需将选项名称附加到 data-bs，例如 data-bs-interval="3000", data-bs-pause="hover"，等等。
				
                	
                    	
                        	
                            	名称
                                类型
                                默认值
                                说明
                                                    	
                        
                        
                        	
                            	interval
                                number
                                5000
                                指定自动循环中一张幻灯片到另一张幻灯片之间的延迟时间（以毫秒为单位）。 如果false，轮播不会自动循环。
                            
                            
                            	keyboard
                                boolean
                                true
                                指定轮播是否应对键盘事件做出反应。 默认情况下它是 true 这意味着如果轮播有焦点，您可以使用键盘上的左右箭头键转到其上一张和下一张幻灯片。
                            
                            
                            	pause
                                string | boolean
                                'hover'
								默认情况下，当鼠标指针进入轮播时暂停轮播，当鼠标指针离开轮播时恢复轮播。 如果设置为 false，将鼠标悬停在轮播上不会暂停它。
                            
                            
                            	ride
                                string | boolean
                                false
                                在用户手动循环第一个项目后自动播放轮播。 如果设置为 'carousel'，则在加载时自动播放轮播。
                            
                            
                            	wrap
                                boolean
                                true
                                指定轮播是否应连续循环或硬停止（即在最后一张幻灯片处停止）。
                            
                            
                            	touch
                                boolean
                                true
                                指定轮播是否应支持触摸屏设备上的左/右滑动交互。
                            
                        
                    
                
				数据属性提供了一种设置轮播选项的简单方法，但是 JavaScript 是更可取的方法，因为它可以防止您重复工作。 请参阅下面的传递选项部分，了解如何使用 JavaScript 设置轮播选项。
				
                方法
                这些是标准Bootstrap程序的轮播方法：
                传递选项
                您还可以使用选项对象将选项传递给轮播。
                以下示例将在轮播中关闭自动滑动。 默认情况下，Bootstrap 轮播会在页面加载时自动开始播放或滑动。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myCarousel").carousel({
        interval: false
    });
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myCarousel");
    var myCarousel = new bootstrap.Carousel(element, {
        interval: false
    });
});
</script>
					
				
				
                一旦到达最后一张幻灯片，以下示例将停止轮播自动滑动。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myCarousel").carousel({
        wrap: false
    });
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myCarousel");
    var myCarousel = new bootstrap.Carousel(element, {
        wrap: false
    });
});
</script>
					
				
				
                cycle
                这个方法启动轮播，从左到右循环遍历项目。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("cycle");
    });
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // 创建一个轮播实例
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.cycle();
    });
});
</script>
					
				
				
                pause
                此方法阻止轮播在项目之间循环。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("pause");
    });
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // 创建一个轮播实例
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.pause();
    });
});
</script>
					
				
				
                prev
                此方法将轮播循环到上一个项目。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("prev");
    });
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // 创建一个轮播实例
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.prev();
    });
});
</script>
					
				
				
                next
                此方法将轮播循环到下一个项目。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("next");
    });
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // 创建一个轮播实例
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.next();
    });
});
</script>
					
				
				
                nextWhenVisible
                当页面不可见或轮播或其父级不可见时，不要将轮播循环到下一个。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myCarousel").carousel("nextWhenVisible");
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myCarousel");

    // 创建一个轮播实例
    var myCarousel = new bootstrap.Carousel(element);

    myCarousel.nextWhenVisible();
});
</script>
					
				
				
                to
                此方法将轮播循环到特定帧（从 0 开始，类似于数组）。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel(2);
    });
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // 创建一个轮播实例
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.to(2);
    });
});
</script>
					
				
				    
                dispose
                此方法会破坏元素的轮播（即删除 DOM 元素上存储的数据）。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCarousel = bootstrap.Carousel.getInstance($("#myCarousel")[0]);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}

        $("#myCarousel").carousel("dispose");
        console.log(myCarousel);
        // {_element: null, _items: null, _interval: null, _activeElement: null, _isPaused: null, …}
    });
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    btn.addEventListener("click", function(){
        var myCarousel = bootstrap.Carousel.getInstance(element);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
        
        myCarousel.dispose();
        console.log(myCarousel);
        // {_element: null, _items: null, _interval: null, _activeElement: null, _isPaused: null, …}
    });
});
</script>
					
				
					
                getInstance
                这是一个静态方法，允许您获取与 DOM 元素关联的轮播实例。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCarousel = bootstrap.Carousel.getInstance($("#myCarousel")[0]);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
    });
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    btn.addEventListener("click", function() {
        var myCarousel = bootstrap.Carousel.getInstance(element);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
    });
});
</script>
					
				
				                
                getOrCreateInstance
                这是一种静态方法，允许您获取与 DOM 元素关联的轮播实例，或者在轮播未初始化的情况下创建一个新实例。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCarousel = bootstrap.Carousel.getOrCreateInstance($("#myCarousel")[0]);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
    });
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    btn.addEventListener("click", function() {
        var myCarousel = bootstrap.Carousel.getOrCreateInstance(element);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
    });
});
</script>
					
				
				          
                
                事件
                Bootstrap 的 carousel 类包含一些用于挂钩 carousel 功能的事件。
                
                	
                    	
                        	
                            	事件
                                说明
                            
                        
                        
                        	
                            	slide.bs.carousel
                                调用幻灯片实例方法时立即触发此事件。
                            
                            
                            	slid.bs.carousel
                                当轮播完成其幻灯片转换时触发此事件。
                            
                        
                    
                
                以下示例在轮播项目的滑动过渡已完全完成时显示警告消息。 让我们尝试一下，看看它是如何工作的。
                
				
					
						
                        	示例
                            
                            	jQuery 
                                JavaScript
                            
                            Try this code »
						
						<script>
$(document).ready(function(){
    $("#myCarousel").on("slid.bs.carousel", function(){
        alert("The sliding transition of previous carousel item has been fully completed.");
    }); 
});
</script>
                        <script>
document.addEventListener("DOMContentLoaded", function(){
    var myCarousel = document.getElementById("myCarousel");

    myCarousel.addEventListener("slid.bs.carousel", function(){
        alert("The sliding transition of previous carousel item has been fully completed.");
    });
});
</script>
					
				
				   
                
                
                    上一页
                    下一页
                
                 
                
  Advertisements

名称	类型	默认值	说明
interval	number	5000	指定自动循环中一张幻灯片到另一张幻灯片之间的延迟时间（以毫秒为单位）。如果`false`，轮播不会自动循环。
keyboard	boolean	true	指定轮播是否应对键盘事件做出反应。默认情况下它是 `true` 这意味着如果轮播有焦点，您可以使用键盘上的左右箭头键转到其上一张和下一张幻灯片。
pause	string \| boolean	'hover'	默认情况下，当鼠标指针进入轮播时暂停轮播，当鼠标指针离开轮播时恢复轮播。如果设置为 `false`，将鼠标悬停在轮播上不会暂停它。
ride	string \| boolean	false	在用户手动循环第一个项目后自动播放轮播。如果设置为 `'carousel'`，则在加载时自动播放轮播。
wrap	boolean	true	指定轮播是否应连续循环或硬停止（即在最后一张幻灯片处停止）。
touch	boolean	true	指定轮播是否应支持触摸屏设备上的左/右滑动交互。

事件	说明
slide.bs.carousel	调用幻灯片实例方法时立即触发此事件。
slid.bs.carousel	当轮播完成其幻灯片转换时触发此事件。

Bootstrap 轮播

使用 Bootstrap 创建轮播

示例

使用字幕创建轮播

示例

创建轮播的黑暗变体

示例

通过数据属性激活轮播

示例

代码说明

通过 JavaScript 激活轮播

示例

选项

方法

传递选项

示例

示例

cycle

示例

pause

示例

prev

示例

next

示例

nextWhenVisible

示例

to

示例

dispose

示例

getInstance

示例

getOrCreateInstance

示例

事件

示例

关于我们

联系方式

互动工具