CODEWITHSUNDEEP
javascriptcssnode.jsexpress-handlebars
John
John

Reputation: 1092

Problem with carousel while loading image dynamically

I have used bootstrap material carousel. It works fine when I load image statically.Like:

<div class="row"  >
    <div class="container-fluid">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
            <div class="carousel-inner">

                <div class="carousel-item active">
                    <div class="view">
                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" alt="First slide">
                        <div class="mask rgba-black-slight"></div>
                    </div>

                    <div class="carousel-caption">
                        <h3 class="h3-responsive">First Event</h3>
                        <p>This is our first event.</p>
                    </div>
                </div>

                <div class="carousel-item">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg" alt="Second slide">

                <div class="carousel-caption">
                    <h3 class="h3-responsive">Second Event</h3>
                    <p>This is our second event.</p>
                </div>

                </div>

                <div class="carousel-item">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide">

                <div class="carousel-caption">
                    <h3 class="h3-responsive">Third Event</h3>
                    <p>This is our third event.</p>
                </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                <i class="material-icons">keyboard_arrow_left</i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                <i class="material-icons">keyboard_arrow_right</i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

But when I load images from database i.e dynamically, carousel's images splits in block view and carousel doesn't works anymore. Like when I load in this way:

<div class="row"  >
    <div class="container-fluid">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
            <div class="carousel-inner">


                {{#each events}}
                <div class="carousel-item active">
                    <div class="view">
                        <img class="d-block w-100" src="/uploads/{{file}}" alt="First slide">
                        <div class="mask rgba-black-slight"></div>
                    </div>

                    <div class="carousel-caption">
                        <h3 class="h3-responsive">{{title}}</h3>
                        <p>{{description}}</p>
                    </div>
                </div>
                {{/each}}



            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                <i class="material-icons">keyboard_arrow_left</i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                <i class="material-icons">keyboard_arrow_right</i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

When I load in this way images are seen in block view one after another instead of carousel.

these are two different images loading from backend

I can see those images but not as a carousel. I mean I am getting images from back end but they are not displayed well. For kind information I have used node js and handlebars as template engine.

What is wrong here? I am new to node and sorry if it was a simple question.

Upvotes: 0

Views: 1445

Answers (1)

Roy Bogado
Roy Bogado

Reputation: 4452

The class active is included in all slides, that's why all of them are visible.
FIrst for all, remove the class active in the slides, and with jQuery you can:

$('.carousel-item:first-child').addClass('active').

https://api.jquery.com/first-child-selector/
This will add the class active for the first node .carousel-item finded.
Hope it helped.
Cheers.

Upvotes: 1

Related Questions