Twice as many images in fancybox? Reason?

Question

JavaScript

I loop through all the photos from the ACF field, the gallery field.

<div class="pop-up-slider">
              <?php foreach( $images as $image ): ?>
              <a class="img-click" data-fancybox="gallery" href="<?php echo $image['url']; ?>">
                <img src="<?php echo $image['sizes']['thumbnail']; ?>" />
              </a>

              <?php endforeach; ?>

It is initially hidden.
I have a handler for another button that triggers a click on the link from the displayed images and they open

$('.case-img').on('click' , function() {
    if($(this).hasClass('hasImg')) {
        $(this).closest('.shadow-have').next('.case-pop-up-wrapper').find('.img-click:first-child').trigger('click');
    } else {
        $(this).closest('.shadow-have').next('.case-pop-up-wrapper').find('.video-click').trigger('click');


    }

In this case, there are 2 pictures, but there are 4 in the gallery, and they just repeat each other.
If you look through the source code after loading, you can see that there are 2 pictures loaded, so why are there 4 of them in the gallery?
Maybe someone had such a problem? How to solve?
I can provide additional data if necessary.

Answer 1

The problem was due to cloning the slick slider for infinite scrolling.