Is it possible to synchronize a bootstrap 4 carousel with controls to a carousel without any controls?
1) When the control arrows are clicked, both carousels will slide simultaneously.
2) Hovering over either carousel will pause both carousels from sliding automatically.
3) When neither carousel is being hovered over, they will slide together automatically at the same interval.
Here is the layout of the two carousels. They are both placed within an equal-width column inside a row. The right carousel (without controls) contains descriptive text corresponding to the images displayed on the left carousel.
I have attempted a few solutions from StackOverflow without success.
<div class="col-6 p-5 text-center">
<div id="carouselExampleIndicators" class="carousel slide py-5 mb-4 carousel-sync" data-ride="carousel" >
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active mt-3 mx-2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1" class="mx-2 mt-3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2" class=" mx-2 mt-3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/img1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/img2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/img3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev carousel-control" 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 carousel-control" 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>
</div>
<div class="col-6 align-middle">
<div id="carouselExamplSlidesOnly" class="carousel slide carousel-sync" data-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active carouseltext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies, velit ut sollicitudin ultricies, diam ipsum interdum nisi, non imperdiet libero tellus id enim. Etiam venenatis vulputate massa, luctus fringilla tellus accumsan a. Donec varius gravida efficitur. In eu nibh dui. Vivamus maximus libero dui, id congue nisl viverra sed. Nam vitae bibendum lectus. Pellentesque sed ligula at metus facilisis cursus.
</div>
<div class="carousel-item carouseltext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies, velit ut sollicitudin ultricies, diam ipsum interdum nisi, non imperdiet libero tellus id enim. Etiam venenatis vulputate massa, luctus fringilla tellus accumsan a. Donec varius gravida efficitur. In eu nibh dui. Vivamus maximus libero dui, id congue nisl viverra sed. Nam vitae bibendum lectus. Pellentesque sed ligula at metus facilisis cursus.
</div>
<div class="carousel-item carouseltext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies, velit ut sollicitudin ultricies, diam ipsum interdum nisi, non imperdiet libero tellus id enim. Etiam venenatis vulputate massa, luctus fringilla tellus accumsan a. Donec varius gravida efficitur. In eu nibh dui. Vivamus maximus libero dui, id congue nisl viverra sed. Nam vitae bibendum lectus. Pellentesque sed ligula at metus facilisis cursus.
</div>
</div>
</div>
</div>