jQuery get currect active slide-CodePudding

How can I get current active slide, and when change slide I get the new one?
I've try with:

    $('#carouselExampleIndicators').bind('slid', function() {
    let currentIndex = $('button.active').index()   1;
   alert(currentIndex)
});

but not working This is JsFiddle: https://jsfiddle.net/moku23/65p0r9f1/6/

CodePudding user response：

Use on() instead of bind()

$('#carouselExampleIndicators').on('slide.bs.carousel', function() {
   currentIndex = $('div.active').index()   1;
   console.log(currentIndex);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--- s__carousel -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div >
    <span id="num"></span>
    <div id="carouselExampleIndicators"  data-bs-ride="carousel">
        <div >
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" 
                    aria-current="true" aria-label="Slide 1">1
            </button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
                2
            </button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
                3
            </button>
        </div>
        <div  style="he">
            <div >
                <img src="https://picsum.photos/200/300"  alt="...">
            </div>
            <div >
                <img src="https://picsum.photos/200/300"  alt="...">
            </div>
            <div >
                <img src="https://picsum.photos/200/300"  alt="...">
            </div>
        </div>
        <button  type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="prev">
            <span  aria-hidden="true"></span>
            <span >Previous</span>
        </button>
        <button  type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="next">
            <span  aria-hidden="true"></span>
            <span >Next</span>
        </button>
    </div>
</div>

CodePudding user response：

If you read the Bootstrap Carousel documentation, you can see that the correct event is slid.bs.carousel, and also that it provides 4 additional properties to the event that's passed to the handler. One of which, from, is the index of the current slide.

In addition, bind() is deprecated and should not be used. Change your code to use on() instead. I'd also check to make sure you're using an up to date version of jQuery. The latest version is 3.6.0.

$('#carouselExampleIndicators').on('slid.bs.carousel', e => {
  let currentIndex = e.from;
  // your logic here...
});

Here's a full working version of your fiddle:

$('#carouselExampleIndicators').on('slid.bs.carousel', e => {
  let currentIndex = e.from;
  let newIndex = e.to;
  
  console.log(currentIndex, newIndex);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div >
  <span id="num"></span>
  <div id="carouselExampleIndicators"  data-bs-ride="carousel">
    <div >
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"  aria-current="true" aria-label="Slide 1">1</button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">2</button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">3</button>
    </div>
    <div  style="he">
      <div >
        <img src="https://picsum.photos/200/300"  alt="...">
      </div>
      <div >
        <img src="https://picsum.photos/200/300"  alt="...">
      </div>
      <div >
        <img src="https://picsum.photos/200/300"  alt="...">
      </div>
    </div>
    <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span  aria-hidden="true"></span>
      <span >Previous</span>
    </button>
    <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span  aria-hidden="true"></span>
      <span >Next</span>
    </button>
  </div>
</div>