Uncaught TypeError: bsCarousel is null

I want to create a gallery

html

<div class="row">
    <div class="col-sm-12 col-md-3 col-lg-2 mb-4">
        <a data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-slide-to="0">
            <div class="card">
                <img data-src="{{ asset('images/music.jpg') }}" alt="" class="lazy d-block w-100">
            </div>
        </a>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 mb-4">
        <a data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-slide-to="1">
            <div class="card">
                <img data-src="{{ asset('images/bekhoda.jpg') }}" alt="" class="lazy d-block w-100">
            </div>
        </a>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div id="carouselExampleControls" class="carousel slide" data-bs-ride="false" data-bs-interval="false">
                    <div class="carousel-inner overflow-hidden">
                        <div class="carousel-item active">
                            <img data-src="{{ asset('images/music.jpg') }}" alt="" class="d-block w-100 lazy">
                        </div>
                        <div class="carousel-item">
                            <img data-src="{{ asset('images/bekhoda.jpg') }}" alt="" class="lazy d-block w-100">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

I want to create a gallery

html

<div class="row">
    <div class="col-sm-12 col-md-3 col-lg-2 mb-4">
        <a data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-slide-to="0">
            <div class="card">
                <img data-src="{{ asset('images/music.jpg') }}" alt="" class="lazy d-block w-100">
            </div>
        </a>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-2 mb-4">
        <a data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-slide-to="1">
            <div class="card">
                <img data-src="{{ asset('images/bekhoda.jpg') }}" alt="" class="lazy d-block w-100">
            </div>
        </a>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div id="carouselExampleControls" class="carousel slide" data-bs-ride="false" data-bs-interval="false">
                    <div class="carousel-inner overflow-hidden">
                        <div class="carousel-item active">
                            <img data-src="{{ asset('images/music.jpg') }}" alt="" class="d-block w-100 lazy">
                        </div>
                        <div class="carousel-item">
                            <img data-src="{{ asset('images/bekhoda.jpg') }}" alt="" class="lazy d-block w-100">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var myCarousel = document.querySelector('#carouselExampleControls')
    var myModalEl = document.getElementById('exampleModal');

    myModalEl.addEventListener('show.bs.modal', function (event) {
        const trigger = event.relatedTarget;
        var bsCarousel = bootstrap.Carousel.getInstance(myCarousel)
        bsCarousel.to(trigger.dataset.bsSlideTo);
    });
</script>

LaryAI

3 years ago

Best Answer

Level 58

The error "Uncaught TypeError: bsCarousel is null" is occurring because the variable bsCarousel is not being properly initialized.

To fix this, we need to make sure that the bootstrap library is properly loaded and that the Carousel component is being initialized before we try to access it.

Here's an updated version of the script that should work:

<script>
    var myCarousel = document.querySelector('#carouselExampleControls')
    var myModalEl = document.getElementById('exampleModal');

    myModalEl.addEventListener('show.bs.modal', function (event) {
        const trigger = event.relatedTarget;
        var bsCarousel = new bootstrap.Carousel(myCarousel, {
            interval: false
        });
        bsCarousel.to(trigger.dataset.bsSlideTo);
    });
</script>

Note that we're now using the "new" keyword to create a new instance of the Carousel component, and we're passing in an options object that sets the interval to false (since we don't want the carousel to automatically advance).

Also, make sure that the bootstrap library is properly loaded before this script is executed.

1 like

Please or to participate in this conversation.