背景：

使用swiper控制元件進行圖片展示，既有條件是:

（1）有一個圖片陣列，包含圖片的url

（2）有一個圖片檔名列表（表格）

（3）圖片檔名列表中的資料來源於圖片陣列

問題：

現在要求利用swiper進行圖片顯示，點表格中的圖片檔名，能用swiper進行展示選中的圖片，同時，能使用swiper進行前後切換，檢視圖片陣列中的其他圖片。

解決：

（1）點選圖片檔名時，迴圈圖片陣列，建立sliders，新增到swiper container，同時獲取點選圖片的索引號；

                     var imgHtml = '<img src="' + imgUrl + '"/>';
                     var $slide = $('<div class="swiper-slide">' + imgHtml + '</div>');
                     $('.swiper-wrapper').append($slide);

獲取圖片索引程式碼未給出。

（2）建立swiper物件
                    mySwiper = new Swiper ('#sc1', {
                        initialSlide: 0,
                        observer: true,
                        observeParents: true,
                        direction: 'horizontal',
                        slidesPerView: 1,
                        loop: false,

                        
                        // 如果需要分頁器
                        pagination: '.swiper-pagination',
                        
                        // 如果需要前進後退按鈕
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        
                        // 如果需要滾動條
                        scrollbar: null,
                    });

（3）將swiper物件的顯示slider定位到指定的索引
                    $('#sc1').show();   
                    
                    mySwiper.slideTo(index);          

index為指定的圖片索引。

注意：

（1）黃底文字是避免圖片顯示的關鍵，特別是loop屬性，一定要設定為false，否則，顯示會非常的混亂，無法定位指定的頁面或slider。