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。

背景：

问题：

解决：

注意：

更多相关文章

随机推荐