Tony33 Tony33 - 5 months ago 23
Javascript Question

javascript append() function breaks a slider

i have this code:

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>


The slider works perfectly.
But if i use something like this in my javascript:

var output = $('.swiper-wrapper');
var landmark = '<div class="swiper-slide">Slide1</div>';
output.append(landmark);


And then edit the slide code as the following:

<div class="swiper-container">
<div class="swiper-wrapper">
<!-- append here -->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>




it's appended correctly but the slide does NOT work anymore. How is it possible?

EDIT: i see everytime i use append() function, something breaks. Even an ul list . It's like...when i use this method, it doesn't care about css...

Answer

Set observer parameter to true when you initialize Swiper object. Example:

var mySwiper = new Swiper('.swiper-container', {
    // ...other parameters
    observer: true
});

That will make Swiper look for DOM changes to update itself.