javascript append() 函数破坏了一个滑块

Question

我有这个代码：

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

滑块完美运行。但是如果我在 javascript:

中使用这样的东西

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

然后编辑幻灯片代码如下：

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

已正确附加，但幻灯片不再起作用。怎么可能？

编辑：我发现每次我使用 append() 函数时，都会出现问题。甚至是一个 ul 列表。就像...当我使用这种方法时，它不关心 css...

Answer 1

在初始化 Swiper 对象时将 observer 参数设置为 true。示例：

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

这将使 Swiper 查找 DOM 更改以更新自身。

Answer 2

您可以在 Swiper 文档 (http://idangero.us/swiper/api/) 找到正确的解决方案：

    mySwiper.appendSlide('<div class="swiper-slide">Slide 10"</div>')
    mySwiper.appendSlide([
       '<div class="swiper-slide">Slide 10"</div>', 
       '<div class="swiper-slide">Slide 11"</div>'
    ]);

javascript append() 函数破坏了一个滑块

javascript append() function breaks a slider

javascript

append

slider

swiper