Swiper中文论坛

标题: 如何回到初始状态，进行swiper-slide的增减 [打印本页]

作者: 路上 时间: 2016-4-21 08:55
标题: 如何回到初始状态，进行swiper-slide的增减
,,大家帮忙看看，谢谢啦<select  id="s1">
<option>请选择</option>
<option>2</option>
<option>4</option>
<option>5</option>
</select>
<div class="swiper-container">
<div class="swiper-wrapper">
      <div class="swiper-slide d1">slider1</div>
      <div class="swiper-slide d2">slider2</div>
      <div class="swiper-slide d3">slider3</div>
</div><script>
var mySwiper = new Swiper('.swiper-container', {
      autoplay:5000,//也可以设置false 禁止轮播

      //direction : 'vertical',// 默认为左右，vertical为上下
      // speed:800  速度
      loop:true//此设置轮播到第五张图时自动切换到第一张图
});
// setInterval(mySwiper(),500);
//定义方法
//change()时调用方法
function chu(){
      var mySwiper = new Swiper('.swiper-container', {
         autoplay:false,//也可以设置false 禁止轮播

         //direction : 'vertical',// 默认为左右，vertical为上下
         // speed:800  速度
         loop:true//此设置轮播到第五张图时自动切换到第一张图
      });
}
function pin(){
      var $s1=$("#s1").val();
      switch($s1){
         case "请选择":
            chu();
            break;
         case "2":
            mySwiper.removeSlide(3);
            break;
         case "4":
            mySwiper.appendSlide('<div class="swiper-slide d4">Slide4</div>');
            break;
         case "5":
            mySwiper.appendSlide('[<div class="swiper-slide d4">Slide4</div>,<div class="swiper-slide d5">Slide5</div>]');
            break;

      }
}
$("#s1").change(function(){
   // alert('sdsd');
      //如何回到最初的页面进行添加slide???
      chu();
      pin();
});</script>

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)