HTML-jQuery(append)中的Swiper使用

小编在HTML的开发中遇到了一个这样的需求问题，即需要先用jQuery增加一段含Swiper的代码，然后再通过其他操作在Swiper中增加Slide,这个问题困扰了小编很久，最终在Swiper官网的童鞋的帮助下得到解决。因此做了一个小DEMO分享一下小编遇到的问题，效果如下：

先在HTML文件中导入jQuery和Swiper相应文件

<link rel="stylesheet" href="css/swiper.min.css" />
<script type="text/javascript" src="js/swiper.min.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script>

然后建立相应的UI代码

        <div id="frame" style="width: 100%;height: 500px; background-color: #007AFF;">
            
        </div>
        <center>
            <button class="btn" onclick="ONE()">ONE</button>
            <button class="btn" onclick="TWO()">TWO</button>
        </center>

同时，也要设置一下Swiper的样式

            .swiper-container{
                width: 100%;
                /*height: 100%;*/
            }
            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
                /* Center slide text vertically */
                 display: -webkit-box;
                 display: -ms-flexbox;
                 display: -webkit-flex;
                 display: flex;
                 -webkit-box-pack: center;
                 -ms-flex-pack: center;
                 -webkit-justify-content: center;
                 justify-content: center;
                 -webkit-box-align: center;
                 -ms-flex-align: center;
                 -webkit-align-items: center;
                 align-items: center;
                 }

接着，就是设置按钮方法

按钮二的方法就是最平常的Swiper增加Slider的方法

            function TWO(){
                $("list").html('')
                for (var i = 1 ; i <= 20 ; i++) {
                    swiper.appendSlide('<div class="swiper-slide">'+i+'</div>')
                }
            }

按钮一的方法是重点，一般来说，Swiper是先初始化再执行的，但是因为是先jQuery,Swiper在jQuery的append代码里面，先初始化是找不到的。因此需要先添加再初始化，如下：

            var swiper;
            function ONE(){
                $("#frame").html('');
                $("#frame").append('<div class="swiper-container" style="background-color: #FF1FF4;height: 300px;top: 100px;">'
                +'<div class="swiper-wrapper" id="list">'
                    
                +'</div>'
            +'</div>');
            
            swiper = new Swiper('.swiper-container', {
                paginationClickable: true,
                slidesPerView: 10,
                direction: 'vertical'});
            }

当上述所有步骤都完成之后，大功告成。即可出现上面显示的效果。

希望这篇文章对各位看官有所帮助，Demo下载地址：Demo