Bootstrap轮播获取当前活动的焦点对象

    在项目中使用了Bootstrap的轮播,需求是轮播下方有一个已读按钮,当点击已读按钮时,隐藏掉当前的焦点的轮播内容;

如图所示:

所以要获取当前的焦点是哪一条;

下方代码是在网络上找到的一个方法,但是发现已经没有了.getActiveIndex()方法,需要进行一定的修正;

$(‘#myCarousel‘).on(‘slide.bs.carousel‘, function () {
             var carouselData = $(this).data(‘bs.carousel‘);

            // var currentIndex = carouselData.getActiveIndex();//当前图片的索引,注意:这并不是下一张图的索引号
          console.dir($(this).data());
            // var items = carouselData.$items;//所有图片的包裹div的数组
        });

输出$(this).data()

发现结果

此处的$active就是我们要拿到的那个焦点对象;

所以代码优化为:

$(‘#myCarousel‘).on(‘slide.bs.carousel‘, function () {
             var carouselData = $(this).data(‘bs.carousel‘).$active;
        });

 

 

我给每个item加了一个id,方便操作;

当然我们的需求不一样,拿到这个对象就好说了。剩下的,自己搞定啦~

时间: 2024-08-28 18:12:07

Bootstrap轮播获取当前活动的焦点对象的相关文章

Bootstrap 轮播加上css3动画,炫酷到底!

对于网站开发者来说,对展示内容增加一个滑动或者是轮播效果的是非常常见的需求.收费和免费的轮播插件多的是不胜枚举.其中很多提供很多有用的配置选项和动态效果. 很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能.同时你的项目是采用Bootstrap,(一个最流行的开源前端框架)的话.你可以参考一下bootstrap官方组件. 这篇文章将展示如何在 Bootstrap轮播上添加有趣的动画效果.同时确保这个js组件自由扩展和快速上手. 介绍Animate.css 为了让我自己写的动画效果值

Bootstrap 轮播(Carousel)插件

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引用该插件的功能,那么您需要引用 carousel.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js. 实例 下面是一个简单的幻灯片,使用 Bootstrap 轮播(Carousel)插件显示了一个循环播放元

bootstrap轮播组件,大屏幕图片居中效果

在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中效果不同,大屏效果非常糟糕.比如 这样一张图片, 为了图片自适应设置width=100%,在宽1920px下显示效果是这样的 显然,因为图片设置了100%的宽度,其大部分内容被截去,显示非常糟糕. 后来想了想.有没有办法可以让图片真正的自适应呢并且居中呢,于是想到了css3背景图片属性backgro

Bootstrap轮播Carousel样式的应用

<h3>bootstrap轮播效果</h3> <div id="myCarousel" class="carousel slide" style="width:300px;"> <!--轮播指南--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-sli

第二百四十八节,Bootstrap轮播插件

Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一.轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例.

bootstrap轮播图 两侧半透明阴影

用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. 然后各种搜索,发现原来是应该这么改: .carousel-control.left { /*background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); back

BootStrap 获得轮播中的索引和当前活动的焦点对象

$('#myCarousel').on('slide.bs.carousel', function (event) { var $hoder = $('#myCarousel').find('.item'), $items = $(event.relatedTarget); //getIndex就是轮播到当前位置的索引 var getIndex= $hoder.index($items); }) 原文地址:https://www.cnblogs.com/moguzi12345/p/9869248

第124天:移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一.基本的轮播图实现 HTML代码 1 <!-- 2 以下容器就是整个轮播图组件的整体, 3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 4 bootstrap.js

bootstrap轮播和百叶窗

轮播 在bootstrap里面,有设置的图片轮播的代码: <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-