无法正确获取活动类的索引号
[英]Not able to Get the Index Number of Active Class Properly
问题描述
Can you please take a look at this demo and let me know why I am not able to get the current index number of .carousel-item.active properly?
你能看看这个演示，让我知道为什么我无法正确获取.carousel-item.active的当前索引号吗？
As you can see when second slide is showing I am still getting the first slide index and so on.正如您在显示第二张幻灯片时所看到的，我仍在获取第一张幻灯片的索引，依此类推。
var totalItems = $('.carousel-item').length; var currentIndex = $('.carousel-item.active').index() + 1; var myCarousel = document.getElementById('carouselExampleIndicators') myCarousel.addEventListener('slide.bs.carousel', function() { currentIndex = $('.carousel-item.active').index() + 1; $('#slide').text('' + currentIndex + ' / ' + totalItems + ''); });
.carousel-item img { max-height: 200px !important; } .carousel-indicators{ top:16px !important; }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="container"> <button type="button" class="btn btn-warning"><span id="slide">1 / 3</span></button> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://placeimg.com/300/280/tech" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placeimg.com/300/280/people" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placeimg.com/300/280/Place" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2021-10-28 18:43:29
For your event, try 'slid.bs.carousel' instead of 'slide.bs.carousel' .对于您的活动，请尝试使用'slid.bs.carousel'而不是'slide.bs.carousel' 。 slide fires immediately while slid fires after the transition is done slide火灾立即同时slid的过渡之后激发的做
var totalItems = $('.carousel-item').length; var currentIndex = $('.carousel-item.active').index() + 1; var myCarousel = document.getElementById('carouselExampleIndicators') myCarousel.addEventListener('slid.bs.carousel', function() { currentIndex = $('.carousel-item.active').index() + 1; $('#slide').text('' + currentIndex + ' / ' + totalItems + ''); });
.carousel-item img { max-height: 200px !important; } .carousel-indicators { top: 16px !important; }
<!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="container"> <button type="button" class="btn btn-warning"><span id="slide">1 / 3</span></button> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://placeimg.com/300/280/tech" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placeimg.com/300/280/people" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placeimg.com/300/280/Place" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何通过唯一的 class “活动”获取元素索引？ - How to get index of element by unique class “active”?
获取等于活动类的div索引 - Get index of div with class equal to active
活动课程无法正常工作 - Active class not working properly
我怎样才能只用javascript获取活动类的索引 - how can i get the index of active class with only javascript
使用 JavaScript 从列表中获取活动类索引 - Get the active class index from list using JavaScript
如何在 Extjs 的卡片布局上获取当前活动项目的索引号（而不是活动项目的 ID）？ - How to get currently active item`s index number (and not active item`s id) on a card layout on Extjs?
正确获取元素的索引 - Get index of element properly
如何在easySlider中获取活动索引？ - How to get the active index in easySlider?
如何使用jQuery获取特定类的元素的索引，位置数 - How to get index, position number of element with certain class with jQuery
Bootstrap-在导航栏上设置正确的活动类 - Bootstrap - Set properly active class on navbar
相关标签