Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – function at bootstrap 4 carousel image slide event

I am using bootstrap 4 carousel with 11 slides which are working fine as desired. I have another div (#div-info) say in which I wish to display certain Text and some other image as per carousel slide. I mean when slide no. 2 is
active, it must display text as SLIDE 2 and some fix images as per slide 2 in another div (#div-info) and when carousel moves to next slide i.e. 3, the another specific text and specific images is to display in div(#div-info).

I had observed the event "slide.bs.carousel" but unable to find the solution.

Please help. I am very much novice in JavaScript and jQuery but I would try me level best to follow your
instructions.

Tags:

2

Answers


  1. 0

    Try slid.bs.carousel.

    From their docs:

    $('#myCarousel').on('slid.bs.carousel', function (ev) {
  // do somethig with 
  console.log(ev.from, ev.to)
})
    Login or Signup to reply.
  2. 0

    In Bootstrap 4 there is a class carousel-caption under this class you can place your text and images. And for further modification, you need to style the image and font with CSS. Here is example code from Bootstrap 4 document

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="img01.png" alt="First slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5>First Slide</h5>
                    <img class="d-block w-100" src="img02.png" alt="First slide" >
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="img02.png" alt="Second slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Second Slide</h5>
                    <img class="d-block w-100" src="img03.png" alt="Second slide" >
                </div>
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="img03.png" alt="Third slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third Slide</h5>
                    <img class="d-block w-100" src="img01.png" alt="Third slide" >
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search