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

Добрый день!

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

Вывожу так:

[[!AjaxSnippet?
    &snippet=`pdoResources`
    &resources=`getTickets`
    &parents=`1893` 
    &limit=`10` 
    &includeTVs=`image`
    &tpl=`tpl.gallery.big`

]]

На выходе получаю это:

Денис

10 декабря 2020, 11:43

1 446

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

Alexey

10 декабря 2020, 12:38

Полагаю, что инициализация слайдера происходит в основном DOM -дереве, при событии document.ready. А тело слайдера грузится позже. Соответственно, скрипт инициализации не видит подгруженную разметку слайдера, ее просто нет в основном DOM-е.

Alexey

10 декабря 2020, 12:58

bezumkin.ru/sections/components/2557/

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

$(document).on('as_complete', document, function(e,d) {
	//код инициализации
});

Денис

10 декабря 2020, 18:08

К сожалению не помогло

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

Alexey

10 декабря 2020, 18:25

Ошибки есть в консоли браузера?

Денис

10 декабря 2020, 18:38

Ошибок нет

Константин Ильин

10 декабря 2020, 19:01

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

Денис

10 декабря 2020, 21:49

Так выглядит вся инициализация главного слайдера и зависимого:

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

Поясняю

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

11 декабря 2020, 00:06

Накидал на тестовом сайте

вызов сниппета:

[[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, как выше написал Константин.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

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

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

Здесь упомянуты