Swiper中文论坛

标题: 关于Swiper基础演示中，缩略图控制的一些问题！ [打印本页]

作者: 水目 时间: 2016-6-17 09:47
标题: 关于Swiper基础演示中，缩略图控制的一些问题！
请路过大神帮忙调教！！！

按照基础演示中的做出来的效果如此

代码：

可是我要的并不是这个样子，我要的是如下的样式，请看：

代码修改如下：

如上图，大图和小图都希望做到自动滚动，所以给它们加了蓝色框的代码，同时小图第一个slide要靠左，所以移除了红色框的代码。
但是！滚动时出现了如下的错误！请看图片，
一：自行滚动时出错

二：点击小图，大图不切换
三：滑动大图时小图切换不准确，且active状态添加也不准。

请路过大神帮忙调教！！！

作者: siyuexi 时间: 2016-7-3 11:06
我也遇到这个问题，请问你解决了没？

作者: wave 时间: 2016-11-10 15:53
请问楼主解决了吗？

作者: 凉凉凉 时间: 2016-11-21 14:14
刚刚解决了，直接用分页器写，不要用双向控制器了

var galleryTop = new Swiper('.gallery-top', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 10,
pagination: '.swiper-pagination',
paginationClickable: true,
paginationBulletRender: function (swiper, index, className) {
return '<span style="background:url('+imageinfo[index].file_name+')" class="' + className + '"></span>';
},
onSlideChangeEnd: function(swiper){
var index = swiper.activeIndex;
$(".width_height").html(imageinfo[index].width_height);
$(".resolution").html(imageinfo[index].resolution);
$(".size").html(imageinfo[index].size);
$(".color").html(imageinfo[index].color);
$(".create_time").html(imageinfo[index].create_time);
$(".format").html(imageinfo[index].format);
}
});

复制代码

作者: 龙龙龙 时间: 2016-12-3 12:00

凉凉凉发表于 2016-11-21 14:14
刚刚解决了，直接用分页器写，不要用双向控制器了

能不能发html+css看看啊

作者: zhanglin 时间: 2017-2-27 12:01
楼主你好，我复制了demo的缩略图代码到我的盒子里面，为什么显示不了，我把我的所有代码删掉就可以

作者: gaozai 时间: 2017-4-13 19:13
您好楼主您能把html代码发一下吗谢谢谢谢

作者: ifyou 时间: 2017-11-21 15:01
你好我想问下你是如何让分页器很多可以滚动的？

作者: web_小虾米 时间: 2018-12-8 15:56
求一个demo

作者: yanguoqiang29 时间: 2019-6-10 15:26
同求一个DEMO，我的会出现缩略图显示不全的问题。
还有如果手动把缩略图那一行拖动一下，有很大几率造成顺序出错

作者: S级英雄BUG骑士 时间: 2019-7-25 17:50

楼主，我想问下：Swiper Chrome浏览器下Thumbs缩略图滑动控制下好像有BUG，鼠标按住不动，稍微滑动一点点，好像就被监听到的感觉，直接自动跳回到前几张图片，操作多次之后，nextbutton右滑按钮直接变灰，后面的图片划不过去了，只展示前面的几张图片，换个浏览器就没问题了，测试过之后不是代码问题！！！！

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)