Compare two images and if same show it

36 Views Asked by At

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:

enter image description here

0

There are 0 best solutions below