Agfdhyk

I have a problem with „carousel” in Bootstrap 4. My carousel code is:

<div class="row">

<div class="col-12 col-lg-10 px-0">

<!--Carousel Wrapper-->

<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">

<!--Slides-->

<div class="carousel-inner" role="listbox">

    <div class="carousel-item active">

      <?php $image = get_field('img_a_4_zdjecia_1'); if( !empty($image) ): ?>

        <a href="<?php echo $image['url']; ?>"><img class="d-block m-auto" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"></a>

        <div class="position-absolute zoomit"><a href="<?php echo $image['url']; ?>"><span class="fas fa-search-plus"></span></a></div>

      <?php endif; ?>



    </div>

    <div class="carousel-item">

      <?php $image = get_field('img_a_4_zdjecia_2'); if( !empty($image) ): ?>

        <a href="<?php echo $image['url']; ?>"><img class="d-block m-auto" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"></a>

        <div class="position-absolute zoomit"><a href="<?php echo $image['url']; ?>"><span class="fas fa-search-plus"></span></a></div>

        <?php endif; ?>

    </div>

    <div class="carousel-item">

      <?php $image = get_field('img_a_4_zdjecia_3'); if( !empty($image) ): ?>

        <a href="<?php echo $image['url']; ?>"><img class="d-block m-auto" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"></a>

        <div class="position-absolute zoomit"><a href="<?php echo $image['url']; ?>"><span class="fas fa-search-plus"></span></a></div>

        <?php endif; ?>

    </div>

    <div class="carousel-item">

      <?php $image = get_field('img_a_4_zdjecia_4'); if( !empty($image) ): ?>

        <a href="<?php echo $image['url']; ?>"><img class="d-block m-auto" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"></a>

        <div class="position-absolute zoomit"><a href="<?php echo $image['url']; ?>"><span class="fas fa-search-plus"></span></a></div>

        <?php endif; ?>

    </div>

</div>

<!--/.Slides-->

<!--Controls-->

<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="sr-only">Poprzednie</span>

</a>

<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="sr-only">Następne</span>

</a>

<!--/.Controls-->

</div>



</div>

<div class="col-12 col-lg-2 px-0">

<ol class="carousel-indicators">

  <?php $image = get_field('img_a_4_zdjecia_1'); if( !empty($image) ): ?>

    <li data-target="#carousel-thumb" data-slide-to="0" class="active"> <img class="d-block w-100" src="<?php echo $image['sizes']['medium']; ?>" class="img-fluid" alt="<?php echo $image['alt']; ?>"></li>

  <?php endif; ?>

  <?php $image = get_field('img_a_4_zdjecia_2'); if( !empty($image) ): ?>

    <li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block w-100" src="<?php echo $image['sizes']['medium']; ?>" class="img-fluid" alt="<?php echo $image['alt']; ?>"></li>

    <?php endif; ?>

    <?php $image = get_field('img_a_4_zdjecia_3'); if( !empty($image) ): ?>

    <li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" src="<?php echo $image['sizes']['medium']; ?>" class="img-fluid" alt="<?php echo $image['alt']; ?>"></li>

    <?php endif; ?>

    <?php $image = get_field('img_a_4_zdjecia_4'); if( !empty($image) ): ?>

    <li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" src="<?php echo $image['sizes']['medium']; ?>" class="img-fluid" alt="<?php echo $image['alt']; ?>"></li>

    <?php endif; ?>

    </ol>

</div>

<!--/.Carousel Wrapper-->

</div>

The big image changes after clicking in the small image (on the right side).

In detail, I mean class=”active”. It changes the colour of the border of the small image and there is everything all right. But what to do to change class=”active” in thumbnail when I switch the big image with the use of arrows (right or left)?

At present my code in JavaScript which adds and removes class=”active” is:

jQuery(function($) {

    $('.carousel-indicators > li').click(function() {

        $(this).siblings('li').removeClass('active');

        $(this).addClass('active');

    });

});

you can use jQuery keycode events check this for reference and keycode values from here

But what to do to change class=”active” in thumbnail when I switch the big image with the use of arrows (right or left)?

If I understood this correctly, you want to change the class="active" once your carousel changes image (using arrow keys). To do this you can use the bootstrap 4 events for the carousel.

$('#carousel-thumb').on('slide.bs.carousel', function () {

  var indicatorId = $('.carousel-indicators > li.active').data('slide-to');



  if (indicatorId === 3) {

    indicatorId = 0;

  } else { 

    indicatorId++;

  }



  $('.carousel-indicators > li.active').removeClass('active');

  $('.carousel-indicators > li[data-slide-to="' + indicatorId + '"]').addClass('active');



});

This should do it. Just a quick explanation, the event slide.bs.carousel runs every time your carousel changes and it gets the id of the previous slide using the data-slide-to attribute and then adds one to it to go to the next and if the it was the last slide, it resets. If in the future you add more slides just change the indicatorId === 3 line to match the number of slides you have.

Also you should fix this mistake in your code data-slide-to="2" is repeated 2 times. Make the last one to be 3 so that this works.

Solved! :)

<script>

jQuery(function($) {

function initCarouselIndicators() {

$(".carousel-indicators[data-target]").each(function (i, indicators) {

    var targetId = indicators.dataset.target;

    if (targetId != "") {

        var $carousel = $(targetId);

        $carousel.bind('slide.bs.carousel', function (e) {

            var $targetSlide = $(e.relatedTarget);

            var index = $targetSlide.index();

            $('.carousel-indicators[data-target="' + targetId + '"] li').removeClass('active')

            $('.carousel-indicators[data-target="' + targetId + '"] li:nth-child(' + (index + 1) + ')').addClass('active');

        });

    }

});

}



initCarouselIndicators();

});

</script>

and it was missing data-target="#myCarousel" in class="carousel-indicators"

<ol class="carousel-indicators" data-target="#carousel-thumb">