Не корректно выводится слайдер через AjaxSnippet

Добрый день!

Не корректно выводится слайдер при загрузке через AjaxSnippet. Без AjaxSnippet все работает и отображается как положено. Подскажите пожалуйста решение.

Вывожу так:
[[!AjaxSnippet?
    &snippet=`pdoResources`
    &resources=`getTickets`
    &parents=`1893` 
    &limit=`10` 
    &includeTVs=`image`
    &tpl=`tpl.gallery.big`

]]
На выходе получаю это:
Денис
Денис
10 декабря 2020, 11:43
modx.pro
911
0

Комментарии: 9

Alexey
Alexey
10 декабря 2020, 12:38
0
Полагаю, что инициализация слайдера происходит в основном DOM -дереве, при событии document.ready. А тело слайдера грузится позже. Соответственно, скрипт инициализации не видит подгруженную разметку слайдера, ее просто нет в основном DOM-е.
    Alexey
    Alexey
    10 декабря 2020, 12:58
    0
    bezumkin.ru/sections/components/2557/

    Тут указано, что есть событие as_complete, которое происходит при загрузке ajaxSnippet. Попробуйте на это событие повесить инициализацию слайдера. 

    $(document).on('as_complete', document, function(e,d) {
	//код инициализации
});
      Денис
      Денис
      10 декабря 2020, 18:08
      0
      К сожалению не помогло

      $(document).on('as_complete', document, function(e,d) {
    slider_demo2.slick({
	slidesToShow: 1,
	slidesToScroll: 1,
	arrows: false,
	fade: true,
        asNavFor: '.slider_demo1'
    });
});
        Alexey
        Alexey
        10 декабря 2020, 18:25
        0
        Ошибки есть в консоли браузера?
          Денис
          Денис
          10 декабря 2020, 18:38
          0
          Ошибок нет
          Константин Ильин
          Константин Ильин
          10 декабря 2020, 19:01
          0
          переменная slider_demo2 должна объявляется внутри этого кода, иначе slider_demo2 наверняка пустая.
            Денис
            Денис
            10 декабря 2020, 21:49
            0
            Так выглядит вся инициализация главного слайдера и зависимого:

            if ($('.slider_demo2').length > 0) {
            var slider_demo2 = $('.slider_demo2');
            var slider_demo1 = $('.slider_demo1');
			
			$(document).on('as_complete', document, function(e,d) {
				slider_demo2.slick({
					slidesToShow: 1,
					slidesToScroll: 1,
					arrows: false,
					fade: true,
					asNavFor: '.slider_demo1'
				});

			});
			
            slider_demo1.slick({
                slidesToShow: 7,
                slidesToScroll: 1,
                asNavFor: '.slider_demo2',
                dots: false,
                prevArrow: "<div class='slider_arrow arrow_left'><i class='fal fa-angle-left'></i></div>",
                nextArrow: "<div class='slider_arrow arrow_right'><i class='fal fa-angle-right'></i></div>",
                centerMode: true,
                focusOnSelect: true,
                responsive: [{
                    breakpoint: 10000,
                    settings: {
                        slidesToShow: 7,
                        slidesToScroll: 1,
                        infinite: true,
                    }
                }, {
                    breakpoint: 1300,
                    settings: {
                        slidesToShow: 6,
                        slidesToScroll: 1,
                        infinite: true,
                    }
                }, {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 7,
                        slidesToScroll: 1,
                        infinite: true,
                    }
                }, {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1
                    }
                }, {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                }]
            });
        }
              Константин Ильин
              Константин Ильин
              10 декабря 2020, 22:50
              0
              Поясняю

              var slider_demo2 = $('.slider_demo2');
              var slider_demo1 = $('.slider_demo1');

              эти две строчки как бы принимают объекты, но т.к. у вас из-за ajaxsnippet нет объектов $('.slider_demo2'); и $('.slider_demo1'); их физечески не существует при загрузке страницы, то переменные пусты или не объявлены. Соответственно, присвоение эти переменных должно происходить в as_complete, т.е. когда ajaxsnippet загрузит данные и в странице появится slider_demo2.

              Более того ваше первое условие
              if ($('.slider_demo2').length > 0) {

              Говорит о том что если такого объекта slider_demo2 не существует, то не выполнять этот код.

              Надеюсь тут все ясно станет.
        Alexey
        Alexey
        11 декабря 2020, 00:06
        0
        Накидал на тестовом сайте

        вызов сниппета:
        [[AjaxSnippet?
      &snippet=`my_slider`
      &as_mode=`onload`
]]

        Чанк, который отдает сниппет my_slider:
        <div class="slider single-item">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

        Код в футере:
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/js/slick-theme.css"/>
<link rel="stylesheet" type="text/css" href="vendor/js/slick.css"/>
<script src="vendor/js/slick.js"></script>

<script>
    $(document).on('as_complete', document, function(e,d) {
    	$('.single-item').slick();
    });
</script>

        Всё прекрасно отрабатывает на тестовом варианте. Значит, осталось разобраться, что именно нужно инициализировать на событие as_complete, как выше написал Константин.
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          9