Search code examples
jquerybootstrap-carousel

Getting current dynamic carousel detail using jquery

I would like to get the current carousel detail.

<input type="hidden" name="business_id" value="">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" style="display:none">
    <div class="carousel-inner">
        @foreach(Auth::user()->businesses as $key => $biz)
            <div class="carousel-item {{$key == 0 ? 'active' : '' }}">
                {{-- <img src="{{url('images', $slider->image)}}" class="d-block w-100"  alt="...">  --}}
                <div class ="public_clinic_post" data-business="{{$biz->id}}">
                    <h6 class="sub-title">著者 : {{$biz->display_business_name}}</h6>
                </div>
            </div>
        @endforeach
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <i class="fas fa-chevron-left"></i>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <i class="fas fa-chevron-right"></i>
    </a>
</div>

enter image description here

When clicking the indicators, it'll show business as carousel element. I would like to get the business id in input 'business_id'

<input type="hidden" name="business_id" value="">
Solution

  • t worked like this for me!

    $('#carouselExampleControls').bind('slid.bs.carousel', function (e) {
    let business_id = $(this).find('.active').find('.public_clinic_post').data('business');
    $('[name="business_id"]').val(business_id);
});