Переинициализировать swiper слайдер?

Question

[Analka]

как после вставки в блок данных, инициализировать слайдер?

$.ajax({
            type: "GET",
            url: $url,
            cache: false,
            success: function(response){
                let $users = '';
                $(response.users.data).each(function( index,value ) {
                    console.log(value);
                    let $active = ''
                    if (index === 0) $active = 'active';
                    $users += '<li data-partner-id="'+value['id']+'" class="'+$active+'">\n' +
                        '                            <div class="datingUserInfo">\n' +
                        '                                <a href="/profile/" class="username" alt="'+value['fullname']+'">'+value['fullname']+'</a>\n' +
                        '                            </div>\n' +
                        '                            <div class="dating--user_img dating__img">\n' +
                        '                                <div class="swiper-container swiper-dating">\n' +
                        '                                    <div class="swiper-wrapper">\n' +
                        '                                        <div class="swiper-slide">\n' +
                        '                                            <img alt="avatar" src="/storage/'+value['avatar']+'">\n' +
                        '                                        </div>\n' +
                        '                                        <div class="swiper-slide">\n' +
                        '                                            <img alt="avatar" src="/storage/">\n' +
                        '                                        </div>\n' +
                        '                                        <div>\n' +
                        '                                            <div class="dating__none">\n' +
                        '                                                <div class="dating__none-title">Загрузите свой аватар</div>\n' +
                        '                                                <p class="dating__none-text">\n' +
                        '                                                    Для того, чтобы просматривать фотографии, Вам необходимо загрузить свою фотографию!\n' +
                        '                                                </p>\n' +
                        '                                                <a href="/profile/me" class="btn-violet">Загрузить аватар</a>\n' +
                        '                                            </div>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                    <div class="swiper-pagination"  slot="pagination"></div>\n' +
                        '                                    <div class="swiper-button-prev" slot="button-prev"></div>\n' +
                        '                                    <div class="swiper-button-next" slot="button-next"></div>\n' +
                        '                                    <div class="swiper-scrollbar"   slot="scrollbar"></div>\n' +
                        '                                </div>\n' +
                        '                            </div>\n' +
                        '                            <div class="dating--user__action">\n' +
                        '                                <div class="">\n' +
                        '\n' +
                        '                                </div>\n' +
                        '                                <div class="flex--row">\n' +
                        '                                    <button type="button"  data-id="'+value['id']+'" data-dialog="'+value['dialog']+'" class="dating--user__envelope btn--round action--btn btn--medium violet-round violet-color send--message">\n' +
                        '                                        <svg><use xlink:href="#envelope"></use></svg>\n' +
                        '                                    </button>\n' +
                        '                                    <div class="dating--user__close btn--round action--btn btn--large close-round close-color btnDtgDsLike" data-partner-id="'+value['id']+'">\n' +
                        '                                        <svg><use xlink:href="#close"></use></svg>\n' +
                        '                                    </div>\n' +
                        '                                    <div class="dating--user__like btn--round action--btn btn--large like-round like-color btnDtgLike" data-partner-id="'+value['id']+'">\n' +
                        '                                        <svg><use xlink:href="#heart"></use></svg>\n' +
                        '                                    </div>\n' +
                        '                                    <div class="dating--user__gift btn--round action--btn btn--medium violet-round violet-color sendGiftToUser" data-id="'+value['id']+'">\n' +
                        '                                        <svg><use xlink:href="#gift"></use></svg>\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                                <a href="/liked" class="dating--user__liked btn--round action--btn  default-round violet-color">\n' +
                        '                                    <svg><use xlink:href="#like"></use></svg>\n' +
                        '                                    <span class="dating-tip show-for-medium">Смотреть понравившихся девушек</span>\n' +
                        '                                </a>\n' +
                        '                            </div>\n' +
                        '                        </li>';

                    console.log($users);
                });

                $('#dtngContainer').html($users);
                $swiper.init();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                toast.fire({
                    type: 'error',
                    title: jqXHR.responseJSON.message
                });
            }
        });

let $swiper = new Swiper('.swiper-dating', {
        observer: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });

Answer 1

[Roman Khegay]

Попробуйте .update(), либо .destroy() и потом .init()

Swiper API

Comments

[Analka]

выдает такое

0:4824 Uncaught TypeError: Cannot read property 'breakpoints' of undefined
    at t.r.init (0:4824)
    at common.js:4849

[Roman Khegay]

Analka, В примере всё работает: