Почему slik slider дублирет фото на мобильной версии?

Question

[Alpha12]

Вопрос такой, есть slick slider і magnific popup
на пк версии все окей, но на мобильной дублирует фото
к примеру у меня есть 3 фото, а на мобильной версии будет показывать что их 6.
Вот код

//slider
$('.slide-item').slick({
    infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  centerPadding: '10px',  
  arrow:true,
  dots:false,
  responsive: [
 
     {
      breakpoint: 895,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,     
      }
    },    
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true, 
      }
    }
  
  ]
   });
// popup
 $('.it-img,.big-img').magnificPopup({
 delegate: 'a',
 type: 'image',
 tLoading: 'Загрузка изображения #%curr%...',
 gallery: {
     enabled: true,
     tCounter: '<span class="mfp-counter">%curr% of %total%</span>' ,
     navigateByImgClick: true,
     preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
 }
 });

А вот если понадобится верстка

<div class="image-item">
      <div class="flex big-img">
        <a href="<?php the_post_thumbnail_url();?>"><?php  the_post_thumbnail(); ?></a>
    
      </div>
      <?php if (have_rows('product_album')): ?>
      	
           
      <div class="slide-item flex">
       <?php 	while(have_rows('product_album')):the_row();

       $image	= get_sub_field('foto'); if($image != ""): ?>
                
        <div class="it-img"><a href="<?php echo $image;?>" rel="alternate"><img src="<?php echo $image;?>" alt="prod"></a></div>
              
       <?php    endif;	
     endwhile; ?>
      </div>
      <?php endif;?>
    </div><!--image-item-->

Comments

[yarnstart]

попробуйте воспроизвести это в песочнице, например https://jsfiddle.net/ , можете уточнить что именно дублируется ? фотографий в mfp становится 6, или в слайдере ?

[Alpha12]

eugenekazakov кажется в слайдере, в верстки показано. Их 6 если смотреть через произвольный код, ссылки нету, оно на локалке

[yarnstart]

Alpha12, у вас стоит infinite: true, наверное поэтому и дублируются элементы в слайдере, сделайте скриншот инспектора, вы только шаблон wp приложили

[Alpha12]

eugenekazakov ссылка
Вот

[yarnstart]

Alpha12, не удивительно, у вас 6 элементов в dom , вам нужно исключить склонированные для infinite: true элементы из делегирования mfp
:not(.slick-cloned)
полный код:

$('.it-img:not(.slick-cloned),.big-img').magnificPopup({
 delegate: 'a',
 type: 'image',
 tLoading: 'Загрузка изображения #%curr%...',
 gallery: {
     enabled: true,
     tCounter: '<span class="mfp-counter">%curr% of %total%</span>' ,
     navigateByImgClick: true,
     preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
 }
 });

[Alpha12]

eugenekazakov,
Я прописал данный код, но оно теперь не работает, просто открывает картинку и все

[yarnstart]

Alpha12, что именно не работает ? у меня теперь в mfp 3 изображения, слайдер работает как и прежде

spoiler

.

[Alpha12]

eugenekazakov, Все ок, я delegate не верно прописал, спасибо за помощь!

[yarnstart]

Alpha12, хорошо, отметьте как решение, для тех, у кого будет подобная проблема и небольшой совет: не castom.js , а custom.js и не используйте класс наподобие .carosel , лучше будет написать .card-thumbnails-carousel , чтобы следующему программисту не пришлось разбираться где же находится данная карусель или почему неправильно работает новая с таким же классом.

Answer 1

[yarnstart]

При использовании карусели( owl , slick etc. ) с включенной функцией infinite необходимо исключать клонированные элементы в различных галереях ( fancybox, mfp etc. ), например
:not(.slick-cloned)
полный код:

$('.it-img:not(.slick-cloned),.big-img').magnificPopup({
 delegate: 'a',
 type: 'image',
 tLoading: 'Загрузка изображения #%curr%...',
 gallery: {
     enabled: true,
     tCounter: '<span class="mfp-counter">%curr% of %total%</span>' ,
     navigateByImgClick: true,
     preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
 }
 });