Bootstrap carousel not working after adding attribute to img element dynamically with jquery

Question

In case you're about to refer me to this : Bootstrap Carousel not working after adding items dynamically with jQuery , what this person was doing is different.

Im getting the paths for 3 images from a javascript variable in an external js file and adding them to an img element in a bootstrap carousel by adding the src attribute using jquery.

This is the javascript variable in the external file:

var bobmarley =

{

"id": "05",
"name": "Bob Marley Museum",
"location": "Hope Road , Kingston",
"duration": "6 hours",
"children": "Yes",
"roundtrip_price": "450",
"oneway_price": "340",
"addoneway": "40",
"addroundtrip": "50",
"agelimit": "4",
"img1": "images/bobmarley/first.jpg",
"img2": "images/bobmarley/second.jpg",
"img3": "images/bobmarley/third.jpg"

 }

I get the 3 img variables by doing :

    img1 = window[tourid].img1;
    console.log(img1);
    img2 = window[tourid].img2;
    console.log(img2);
    img3 = window[tourid].img3;
    console.log(img3);

Please note the paths are successfully stored in local variables and show up correctly in the console.

I then use a jquery function to add the source attribute to each img element in the carosuel.

    $(document).ready(function () {


        $('.first').attr('src', img1);

        $('.second').attr('src', img2);


        $('.third').attr('src', img3);
         
         }

This is the Bootstrap carousel

         <div id="carousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">

                        <div class="carousel-item-active">
                            <img id="img1" class="d-block w-100 first" alt="first slide">
                        </div>

                        <div class="carousel-item">
                            <img id="img2" class="d-block w-100 second" alt="second slide">
                        </div>

                        <div class="carousel-item">
                            <img id="img3" class="d-block w-100 third" alt="Third slide">
                        </div>

                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/ys_FALLS/ysFalls6.jpg" alt="fourth slide">
                        </div>
                    </div>
                    <a id="prev" class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a id="next" class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

So what's happening is the src attribute is being added with the correct path successfully(i checked chrome dev tools ). BUT THE NEXT AND PREVIOUS BUTTONS IN THE BOOTSTRAP CAROUSEL WON'T CHANGE THE SLIDE!

I have tried: -creating a unique id for each img element instead of using the class to select them (didnt work)

-changing the interval of the carousel per bootstrap documentation( it's unresponsive )

-making the second slide "active" instead of the first slide (it displayed the second slide correctly but the buttons still wouldnt work)

Also note there are no errors in my javascript or jquery , I have the jquery file path before my bootstrap file path.

And where exactly do you initialise the carousel? Because with data-ride it will do it's calculations on DOM ready, then you insert images, and then the carousel is like: nah, not gonna do prev/next because according to my calculations there's nothing to show. So maybe, initialise the carousel after you've inserted images. — Tim Vermaelen
btw, another idea: use placeholder images to fill the src in the HTML. You'll be overriding the src anyway. If that doesn't work, forget about my comments ^^ — Tim Vermaelen
neither of these solutions worked but thank you none the less — Shelbert Miller

Ian M. Ian M. · Accepted Answer · 2020-07-18T01:34:06

The class of your first carousel-item should actually be two separate classes:

Try changing:

<div class="carousel-item-active">
    <img id="img1" class="d-block w-100 first" alt="first slide">
</div>

to:

<div class="carousel-item active">
    <img id="img1" class="d-block w-100 first" alt="first slide">
</div>

Bootstrap carousel not working after adding attribute to img element dynamically with jquery

1 Answers