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="https://player.vimeo.com/video/<?php $video_vimeo_url = get_field( 'video_vimeo_url' ); echo $video_vimeo_url; ?>" />
</div>
<span class="glyphicon glyphicon-remove close" aria-hidden="true">close</span></div>

The jQuery

jQuery(document).ready(function ($) {
  $('div.video-slide').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>';
    $(this).replaceWith(video);
    $(".squarediv").addClass("squarediv-active");
    $(".close").addClass("close-active");
    $(".text-block").addClass("text-block-active");
    $(".arrow-block").addClass("arrow-block-active");

  }).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>';
    $('.videop').replaceWith(img);
    $(".squarediv").removeClass("squarediv-active");
    $(".close").removeClass("close-active");
    $(".text-block").removeClass("text-block-active");
    $(".arrow-block").removeClass("arrow-block-active");
  });

Thank you,

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


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: