Handle two sliders with a single control. Bootstrap 4

Navigation
1

I intend to handle two Bootstrap 4 sliders with a single controller. I have looked on the internet and I have found a solution that I think is the most appropriate, but when I try to apply it it does not work for me.

The code I have is the following: 

<div id="timeline" class="row timeline">
    <div class="col-lg-6">
        <div class="timeline-wrapper h-100">
            <div id="carousel-timeline" class="the-timeline carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="carousel-caption">
                            <p>...</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="carousel-caption">
                            <p>...</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="carousel-caption">
                            <p>...</p>
                        </div>
                    </div>
                </div>
                <a href=".the-timeline" class="carousel-control-prev" role="button" data-slide="prev">
                    <span class="icomoon-triangle-left text-child-blue" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a href=".the-timeline" class="carousel-control-next" role="button" data-slide="next">
                    <span class="icomoon-triangle-right text-child-blue" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div id="carousel-timeline-img" class="the-timeline carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="http://example.com/img-1.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="http://example.com/img-2.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="http://example.com/img-3.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
        </div>
    </div>
</div>

Y: 

$('#carousel-timeline, #carousel-timeline-img').carousel();

But it does not work, it's only effective with the first block, that is with #carousel-timeline . What's wrong here?

Thanks in advance ...

    
asked by Roger TM 29.03.2018 в 00:10
source

1 answer

0

I finally solved it with js: 

$('#carousel-timeline').on('slide.bs.carousel', function(event){
    var number  = event.to;
    $('#carousel-timeline-img').carousel(number);
});
    
answered by 02.04.2018 в 22:01
Error with vector images Pass this SQL query to Propel