bootstrap 4 carousel not getting the right thumb

I’ve built a carousel in a wordpress dev. I want it to get the posts and create slides in the carousel. So far so good. I’m presenting an image that when someone click on it a video opens. And when click the close button it comes back to the first state. My problem:
It is retrieving the image of another slide.

Here is my code:

A bit of the carousel:

<div class="squarediv" data-aos="fade-right">
    <img src="<?php echo $thumbnail; ?>" data-img="<?php echo $thumbnail; ?>" data-video="<?php $video_vimeo_url = get_field( 'video_vimeo_url' ); echo $video_vimeo_url; ?>" />
<span class="glyphicon glyphicon-remove close" aria-hidden="true">close</span></div>

The jQuery

jQuery(document).ready(function ($) {
  $('').on('click', 'img', function () {
    video = '<iframe class="videop" src="' + $(this).attr('data-video') + '?autoplay=1&title=0&byline=0&portrait=0" width="1280" height="720" frameborder="0" allowfullscreen></iframe>';

  }).on('click', '.close', function () {
    img = '<img src="' + $('.squarediv img').attr('data-img') + '" data-img="' + $('.squarediv img').attr('data-img') + '" data-video="' + $('.squarediv img').attr('data-video') + '" ></img>';

Thank you,

Read more here: bootstrap 4 carousel not getting the right thumb

Leave a Reply

Your email address will not be published. Required fields are marked *