Можно ли сделать, так что бы работали несколько слайдеров на одной странице после подгрузки Ajax контента новой записи, и не было конфликта?

Question

[Ruslan Danilov]

Здравствуйте!
На странице присутствует бесконечная прокрутка постов, и на них есть слайдера, реализованы slick slider, но когда загружается вторая страница, на которой есть такой же слайдер с теми класами, то он не работает, а когда прописываю классы там в контенте где формируется ajax, то выходит конфликт и второй тогда не работает.
Подскажите пожалуйста как можно это решить?

Comments

[Konstantin Zhikhor]

давайте код html и js. будем разбираться. так это гадание на кофейной гуще

[Ruslan Danilov]

Konstantin Zhikhor, Здравствуйте!
Вот я вызываю слайдер в одном файле в обычной записи

<div class="slider-news">
    <?php
    if( have_rows('slider_news') ):
        while ( have_rows('slider_news') ) : the_row(); ?>
            <div>
                <?php 

                $gal = get_sub_field('slider_image');
                $url = $gal['url'];
                $title = $gal['title'];
                $id = $gal['id'];
                ?>
                 <img src="<?php echo $url; ?>" class="slider-img" data-url="<?php echo $id; ?>" data-name="<?php echo $title; ?>" alt="">
            </div>
        <?php endwhile;
    endif;
    ?>
</div>

Вот скрипт вызова слайдера

$('.slider-news').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    arrows: true,
    draggable: false,
  });

В function.php я прописываю ajax и подтягиваю шаблон с которого нужно будет тянуть верстку для новой страницы бесконечной прокрутки, там тот же слайдер только с другими фото.
Когда я скрипт подтягиваю в файл где бесконечная прокрутка, то уже консоль ругается

[Konstantin Zhikhor]

ruslan111192, вот тут похожая ситуация. Slick Slider как сделать несколько связанных слайдеров? попробуйте как там советуют

[Konstantin Zhikhor]

ruslan111192, попробуйте так еще

$.each($('.slider-news'), function(index,value){
$(this).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    arrows: true,
    draggable: false,
  });
});

[Andrew]

ruslan111192, как сказал Konstantin Zhikhor, засуньте это в коллбэк аякса

$.each($('.slider-news'), function(index,value){
if(!$(this).hasClass('slick-initialized')){
$(this).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    arrows: true,
    draggable: false,
  });
}
});

[Ruslan Danilov]

Спасибо! Сейчас попробую

[Ruslan Danilov]

Помогло! Спасибо!