I need a method/logic for JavaScript to make that the active slide on my carousel will trigger to show on another slider a slide with the same image.
Here I have 1 carousel (it's Glide.js):
<div class="carousel">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide"><img src="IMAGES/1.jpg" alt=""></li>
<li class="glide__slide"><img src="IMAGES/2.jpg" alt=""></li>
<li class="glide__slide"><img src="IMAGES/3.jpg" alt=""></li>
<li class="glide__slide"><img src="IMAGES/4.jpg" alt=""></li>
<li class="glide__slide"><img src="IMAGES/5.jpg" alt=""></li>
<li class="glide__slide"><img src="IMAGES/6.jpg" alt=""></li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<"><i class="fas fa-arrow-left" style="color: #ffffff;"></i></button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">"><i class="fas fa-arrow-right" style="color: #ffffff;"></i></button>
</div>
</div>
</div>
And here I have my future slider that should show 1 slide per view based on what slide is active in my previous carousel:
<div class="slider_container">
<div class="slide">
<div class="bio_v">
<h2>Author1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus totam dignissimos minus, suscipit, voluptatem optio dolor eligendi error harum assumenda ipsum quidem itaque ea veritatis aliquam. Laudantium dignissimos voluptas veritatis?</p>
</div>
<div class="image_v"><img src="IMAGES/1.jpg" alt=""></div>
</div>
<div class="slide">
<div class="img_h">
<div class="image_h"><img src="IMAGES/2.jpg" alt=""></div>
<div class="bio_h">
<h2>Author2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus totam dignissimos minus, suscipit, voluptatem optio dolor eligendi error harum assumenda ipsum quidem itaque ea veritatis aliquam. Laudantium dignissimos voluptas veritatis?</p>
</div>
</div>
</div>
<div class="slide">
<div class="img_h">
<div class="image_h"><img src="IMAGES/3.jpg" alt=""></div>
<div class="bio_h">
<h2>Author3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus totam dignissimos minus, suscipit, voluptatem optio dolor eligendi error harum assumenda ipsum quidem itaque ea veritatis aliquam. Laudantium dignissimos voluptas veritatis?</p>
</div>
</div>
</div>
<div class="slide">
<div class="img_h">
<div class="image_h"><img src="IMAGES/4.jpg" alt=""></div>
<div class="bio_h">
<h2>Author4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus totam dignissimos minus, suscipit, voluptatem optio dolor eligendi error harum assumenda ipsum quidem itaque ea veritatis aliquam. Laudantium dignissimos voluptas veritatis?</p>
</div>
</div>
</div>
<div class="slide">
<div class="bio_v">
<h2>Author5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus totam dignissimos minus, suscipit, voluptatem optio dolor eligendi error harum assumenda ipsum quidem itaque ea veritatis aliquam. Laudantium dignissimos voluptas veritatis?</p>
</div>
<div class="image_v"><img src="IMAGES/5.jpg" alt=""></div>
</div>
<div class="slide">
<div class="bio_v">
<h2>Author6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus totam dignissimos minus, suscipit, voluptatem optio dolor eligendi error harum assumenda ipsum quidem itaque ea veritatis aliquam. Laudantium dignissimos voluptas veritatis?</p>
</div>
<div class="image_v"><img src="IMAGES/6.jpg" alt=""></div>
</div>
</div>
I need help to create a function in JavaScript that will do that. For a better understanding here is an image of the design. A big block on the right is an actual slide that needs to change based on the active slide of the carousel on the left: