小編在HTML的開發(fā)中遇到了一個(gè)這樣的需求問題，即需要先用jQuery增加一段含Swiper的代碼，然后再通過其他操作在Swiper中增加Slide,這個(gè)問題困擾了小編很久，最終在Swiper官網(wǎng)的童鞋的幫助下得到解決。因此做了一個(gè)小DEMO分享一下小編遇到的問題，效果如下：

先在HTML文件中導(dǎo)入jQuery和Swiper相應(yīng)文件

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

然后建立相應(yīng)的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>

同時(shí)，也要設(shè)置一下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;
                 }

接著，就是設(shè)置按鈕方法

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

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

按鈕一的方法是重點(diǎn)，一般來說，Swiper是先初始化再執(zhí)行的，但是因?yàn)槭窍萰Query,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'});
            }

當(dāng)上述所有步驟都完成之后，大功告成。即可出現(xiàn)上面顯示的效果。

希望這篇文章對(duì)各位看官有所幫助，Demo下載地址：Demo，對(duì)支持小編的看官們表示感謝。