bootstrap 3 轮播图组件(Carousel) 获取当前显示图片的索引

官方文档

Events
Bootstrap’s carousel class exposes two events for hooking into carousel functionality.

Both events have the following additional properties:

direction : The direction in which the carousel is sliding (either “left” or “right”).
relatedTarget: The DOM element that is being slid into place as the active item.

有两个回调方法
Event TypeDescription
slide.bs.carouselThis event fires immediately when the slide instance method is invoked.
slid.bs.carouselThis event is fired when the carousel has completed its slide transition.

两个回调方法都可以使用

$(选择器).on('slide.bs.carousel', function (obj) {
        // 当前轮播索引
        var index = $(this).find('.item').index(obj.relatedTarget);
        console.log("索引:" + index);
 });

此方法针对bootstrap 3使用
网上的.getActiveIndex()方法,适用于bootsrap v3.0.2,如果出现无法获取的情况可以试试我这个方法

写在最后

本人为纯小白,所写的博客也是因为学习使用中遇到的问题进行查找资料然后解决后才编写的,其中如果有某些地方有错误,或者涉及侵权的请联系我,

QQ : 994961015
E-mail: yangxj96@126.com

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Bootstrap 是 Twitter 推出的一个用于快速开发 Web 应用程序的前端框架。它包含了 HTML、CSS 和 JavaScript,可以帮助开发者快速构建优美的、响应式的 Web 界面。下面是 Bootstrap 的使用详细教程。 1. 引入 Bootstrap 在 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。可以从官网下载 Bootstrap,也可以使用 CDN 引入。示例代码如下: ```html <!-- 引入 Bootstrap 的 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <!-- 引入 Bootstrap 的 JavaScript 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> ``` 2. 使用 Bootstrap组件 Bootstrap 提供了许多常用的 UI 组件,如导航栏、按钮、表单、轮播图等。可以在官网查看所有组件的使用方法。下面以轮播图为例,介绍如何使用 Bootstrap 实现轮播图。 ```html <!-- 轮播图 --> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://via.placeholder.com/800x400?text=Slide+1" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> ``` 轮播图的 HTML 结构包含了 `.carousel`、`.carousel-inner`、`.carousel-item`、`.carousel-control-prev`、`.carousel-control-next` 等类。其中,`.carousel` 类表示轮播图的容器,`.carousel-inner` 类表示轮播图的内容区域,`.carousel-item` 类表示每张轮播图,`.carousel-control-prev`、`.carousel-control-next` 类表示左右切换按钮。 3. 自定义样式 Bootstrap 提供了丰富的 CSS 类,可以方便地自定义样式。例如,可以通过 `.carousel-item` 类修改每张轮播图的样式: ```css .carousel-item { height: 400px; } .carousel-item img { height: 100%; object-fit: cover; } ``` 这里通过设置 `.carousel-item` 的高度为 400px,使轮播图的高度固定。另外,通过设置 `.carousel-item img` 的高度为 100% 和 `object-fit: cover`,使图片自适应容器大小,并保持比例。 以上就是使用 Bootstrap 实现轮播图的详细步骤。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值