Swiper: Swiper in modal with Ajax

[hmammadov]

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!

[nolimits4web]

Swiper should be initiliazed when modal becomes visible, or it should be re initialized when modal becomes visible. There is no .reInit method, it should be swiper.update()

[hmammadov]

Thank you!

[wwwwwwoorks]

What does it mean?
For instance, i could just put something like:

<script>
  function reinitSwiper(swiper) {
    setTimeout(function () {
    swiper.update();
    }, 500);
  }
</script>

After:

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

And it should fix the issue?

[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 !