Swiper in modal with Ajax

Hello!

I have problem with loading Swiper in Bootstrap modal with Ajax.

Problem is that slider not working. It seems like slider blocked, pagination have only 1 dot, but in real there are more images downloaded from DB. And next/prev buttons also blocked.

I tried use reInit:

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.reInit();
  }, 500);
}

after “$(‘.swiper-container’).swiper({…});” in script.js , but it change nothing

Here my code:

/script.js/

$('#id').on('click', function () {
    var ID = $(this).attr('id');
    $.ajax({
        url: './',
        type: 'POST',
        data: {ID: ID},
        success: function(res){
            $(res).appendTo($('body'));
            /*Swiper*/
            $('.swiper-container').swiper({
                pagination: '.swiper-pagination',
                paginationClickable: true,
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev'
            });
            /*Bootstrap modal run*/
            $('#myModal').modal('show');
        },
        error: function(){
            alert('Error');
        }
    });
});

/controller.php/

if(isset($_POST['ID'])){
    $ID = $_POST['ID'];
    $img = getImgfromDB($dbconn, $ID);
    require_once 'modalImg.php';
    exit;
}

/modalImg.php/

<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class='galleryContent'>
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <?php foreach($img as $item): ?>
                            <div class="swiper-slide"><img src="_img/<?=$item?>" /></div>
                            <?php endforeach; ?>
                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
            </div>
        </div>
    </div>
</div>

Thanks in advance, for your help!

[wwwwwwoorks]

I just discovered that to fix this issue in most of the cases adding:

  observer: true,
  observeParents: true,

to the swiper call do the trick.

So from the example above:

var swiper = new Swiper('#slide-event', {
  effect: 'slide',
  keyboardControl: true,
  centeredSlides: true,
  loop: false,
  observer: true,
  observeParents: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  speed: 0,
})

[W1773ND]

thanks wwwwwwoorks !