【前端开发】bootstrap框架：轮播（Carousel）

已于 2023-10-04 00:34:00 修改
阅读量6.1k 收藏 33
点赞数 3
分类专栏： 前端开发 文档解析 文章标签： bootstrap html html5
于 2021-09-03 17:34:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48348920/article/details/118016977
版权
本文详细介绍了如何使用Bootstrap的轮播插件创建响应式的幻灯片展示。内容包括轮播的基础结构、数据属性、导航控制、标题添加以及通过JavaScript手动操作轮播的方法。同时提供了多个示例代码，展示了如何添加轮播指标、轮播项目、轮播导航以及标题，并解释了如何通过数据属性和JavaScript事件来控制轮播的行为。此外，还提到了如何处理轮播的自动播放和暂停功能，以及如何通过按钮控制轮播的切换。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容

幻灯片

  • 实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性
  • .slide：动画中的滑动类
  • .carousel：轮播图类
  • data-taret：为哪个结构服务
  • .carousel-indicators：轮播图指标
  • .caousel-inner：轮播图项目
  • .carousel-control：轮播图导航
  • .left,.right：导航左右阴影
  • data-slide：接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置
  • data-slide-to ：来向轮播传递一个原始滑动索引，索引从 0 开始计数
  • .sr-only：标注
  • aria-hidden：是否隐藏标注
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
	<link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>   
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
		</div>
		<div class="item">
			<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
		</div>
		<div class="item">
			<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div> 

</body>
</html>

在这里插入图片描述

可选的标题

通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>   
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
			<div class="carousel-caption">标题 1</div>
		</div>
		<div class="item">
			<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
			<div class="carousel-caption">标题 2</div>
		</div>
		<div class="item">
			<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
			<div class="carousel-caption">标题 3</div>
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	</a>
</div> 

</body>
</html>

在这里插入图片描述

通过 JavaScript 手动调用

  • data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放
  • 默认使用Bootstrap的Carousel组件，只需要加上 data-ride="carousel" 就可以实现自动播放了。无需使用初始化的js函数。所以，如果carousel不会自动播放，那么首先检查这个部分。这里还能加其他参数，比如是设置图片轮转的时间间隔：<div id="carousel-ad" class="carousel slide" data-ride="carousel" data-interval="2000">
   <div id="carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active"><img class="img-responsive" src="images/pic01.jpg"></div>
            <div class="item"><img class="img-responsive" src="images/pic02.jpg"></div>
            <div class="item"><img class="img-responsive" src="images/pic03.jpg"></div>
        </div>
    </div>
  • 当 data-ride="carousel" 这个方法不管用的时候，可以手动初始化一下
$('#carousel').carousel();
  • 属性选项
  • data-interval：自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环，默认值：5000
  • data-pause：鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环，默认值为hover
  • data-wrap：轮播是否连续循环，默认值为true
  • 轮播方法
  • .carousel(options)：初始化轮播为可选的 options 对象，并开始循环项目
$('#identifier').carousel({
    interval: 2000
})
  • .carousel('cycle')：从左到右循环轮播项目
  • .carousel('pause')：停止轮播循环项目
  • .carousel(number)：循环轮播到某个特定的帧（从 0 开始计数，与数组类似）
  • .carousel('prev')：循环轮播到上一个项目
  • .carousel('next')：循环轮播到下一个项目
<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" 
            class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    <!-- 控制按钮 -->
    <div style="text-align:center;">
        <input type="button" class="btn start-slide" value="Start">
        <input type="button" class="btn pause-slide" value="Pause">
        <input type="button" class="btn prev-slide" value="Previous Slide">
        <input type="button" class="btn next-slide" value="Next Slide">
        <input type="button" class="btn slide-one" value="Slide 1">
        <input type="button" class="btn slide-two" value="Slide 2">            
        <input type="button" class="btn slide-three" value="Slide 3">
    </div>
</div> 
<script>
$(function(){
        // 初始化轮播
        $(".start-slide").click(function(){
            $("#myCarousel").carousel('cycle');
        });
        // 停止轮播
        $(".pause-slide").click(function(){
            $("#myCarousel").carousel('pause');
        });
        // 循环轮播到上一个项目
        $(".prev-slide").click(function(){
            $("#myCarousel").carousel('prev');
        });
        // 循环轮播到下一个项目
        $(".next-slide").click(function(){
            $("#myCarousel").carousel('next');
        });
        // 循环轮播到某个特定的帧 
        $(".slide-one").click(function(){
            $("#myCarousel").carousel(0);
        });
        $(".slide-two").click(function(){
            $("#myCarousel").carousel(1);
        });
        $(".slide-three").click(function(){
            $("#myCarousel").carousel(2);
        });
    });
</script>
  • 轮播事件（可在函数中当钩子使用）
  • slide.bs.carousel：当调用 slide 实例方法时立即触发该事件
$('#identifier').on('slide.bs.carousel', function () {
    // 执行一些动作...
})
  • slid.bs.carousel：当轮播完成幻灯片过渡效果时触发该事件
$('#identifier').on('slid.bs.carousel', function () {
    // 执行一些动作...
})
Bootstrap 轮播
xyq2024的博客
09-28 707
Bootstrap 轮播是一个响应式的图片或内容滑块，它允许用户通过点击或滑动来浏览一系列的图片或内容。轮播组件自动添加了控制按钮和指示器，使得用户可以方便地导航。Bootstrap 轮播的样式可以通过 CSS 进行自定义。例如，可以修改指示器的大小、颜色，或者更改控制按钮的样式。此外，还可以通过添加自定义类来进一步美化轮播。在上面的代码中，我们修改了指示器的大小、颜色和形状，并设置了激活状态的颜色。
深入了解Bootstrap框架：从入门到精通
chaosweet的博客
11-06 3036
人生恰恰像马拉松赛跑一样，只有坚持到最后的人，才能称为胜利者。
bootstrap3.0，轮播图框架
04-26
里面有bootstrap，还有jquery，直接解压就行
bootstrap使用总结（carousel设置大小。item设置大小，img设置大小）
weixin_30340775的博客
06-14 4558
在bootstrap中使用carousel，先要给.carousel一个大小, 要想使carousel和item和img随着浏览器大小而变，就要设置 .carousel .item { height: 500px; background-color: #777;}.carousel-inner > .item > img { position: absolute; top:...
vue vue3 走马灯Carousel
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
03-26 1066
走马灯实现多张图片轮播展示，element组件的官网有详细介绍。走马灯的图片点击预览需要给图片绑定一个自定义点击事件
bootstrap轮播图
02-28 331
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-e...
轮播图框架
胖火柴的随笔
12-25 465
今天对轮播图进行了修改 原来使用的框架在加载图片时 加载时间稍长 所以在GitHub上 又找了一个 地址 https://github.com/youth5201314/banner 这个星比较多 在demo中测试 加载时间稍短  现在的绝大数app都有banner界面，实现循环播放多个广告图片和手动滑动循环等功能。因为ViewPager并不支持循环翻页， 所以要实现循环还得需要自己去动
【Java 进阶篇】深入浅出：Bootstrap 轮播图
繁依Fanyi的博客
10-22 2162
轮播图，也称为幻灯片，是一种交互式元素，通常用于在网页上轮流显示多个内容片段。它们可以包含图像、文本、按钮等，并具有自动播放和手动导航功能。轮播图是吸引用户视觉注意力的有力工具，经常用于网站的主页、产品展示、图片库等。在Bootstrap中，轮播图是通过Carousel组件来实现的。Carousel是Bootstrap的一部分，它提供了创建和管理轮播图的所有必要功能。下面，我们将逐步介绍如何使用Bootstrap创建和自定义轮播图。
Bootstrap 插件-轮播
litengbin的博客
01-22 1360
1 : 基本轮播     2 : 带标题的轮播     3 : 设置轮播速度     4 : 控制前后的轮播     基本轮播 div.item img{ width:100%; } div#carousel-example-generic{ width:80%; margin:0 auto; }
Bootstrap图片轮播组件Carousel使用方法详解
09-01
首先，Bootstrap本身是一个流行的前端开发框架，由Twitter的设计师Mark Otto和Jacob Thornton联合开发。它提供了一套优雅的HTML和CSS样式规范，以及基于Less的动态CSS支持。Bootstrap的流行在于它的响应式设计和易于...
掌握Bootstrap框架：前端开发的利器
Bootstrap框架是前端开发者必备的工具之一，它极大地简化了Web开发流程，并提高了开发效率。通过使用Bootstrap，开发者可以在较短的时间内创建出具有良好用户体验的响应式网站。对于学习和掌握现代Web开发技术的前端...
非常好用非常简单的轮播图框架
10-10
非常简单实用的轮播图框架 何必自己造轮子
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
09-01
Bootstrap框架是目前非常流行的一款前端开发框架，它简化了网页设计和开发流程，提供了丰富的预设样式、组件和JavaScript插件。以下是对标题和描述中所提到的Bootstrap关键知识点的详细说明： 1. **Bootstrap框架**...
Bootstrap 轮播（Carousel）详解
weixin_34194702的博客
04-17 495
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 实...
5.12 Bootstrap 轮播(Carousel)插件
梁辰兴的博客
07-24 1130
下面是一个简单的幻灯片，使用 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件。为了实现轮播，您只需要添加带有该标记的代码即可。注意：如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
使用Bootstrap插件实现轮播效果（自动、手动）
m0_46274629的博客
07-21 3672
使用Bootstrap插件实现轮播效果（自动、手动）
BootStrap笔记——轮播
senmu_的博客
12-01 269
轮播 1.基本轮播 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active">&lt
css轮播图_前端组件之轮播图
weixin_39736150的博客
11-27 456
前端组件之轮播图继续更新组件的文章,今天来说说轮播图组件。相信这个组件应该在各大网站都能经常见到，大家面试的时候可能也会被问到轮播图的原理和实现。 所以，下面来说说说我自己实现的时候的一些心得!~上面图这个就是京东的一个轮播图.我们就模仿类似的做一个轮播图。原理将图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。需求分析功能分析要实现这个效果，首先需要分析一下。轮播图最重要就是图片通过轮播...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值