swiper 定位到指定页面或位置

背景：

使用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。