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

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

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

这将使Swiper寻找DOM更改以自行更新。

Answer 2

您可以在Swiper docs（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（）函数打破了一个滑块

2 个答案: