水目 发表于 2016-6-17 09:47:25

关于Swiper基础演示中,缩略图控制的一些问题!

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


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

代码:


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

代码修改如下:

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

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


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




siyuexi 发表于 2016-7-3 11:06:24

我也遇到这个问题,请问你解决了没?

wave 发表于 2016-11-10 15:53:26

请问楼主解决了吗?

凉凉凉 发表于 2016-11-21 14:14:57

刚刚解决了,直接用分页器写,不要用双向控制器了    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.file_name+')" class="' + className + '"></span>';
      },
      onSlideChangeEnd: function(swiper){
            var index = swiper.activeIndex;
            $(".width_height").html(imageinfo.width_height);
            $(".resolution").html(imageinfo.resolution);
            $(".size").html(imageinfo.size);
            $(".color").html(imageinfo.color);
            $(".create_time").html(imageinfo.create_time);
            $(".format").html(imageinfo.format);
      }
    });

龙龙龙 发表于 2016-12-3 12:00:25

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

能不能发html+css看看啊

zhanglin 发表于 2017-2-27 12:01:29

楼主你好,我复制了demo的缩略图代码到我的盒子里面,为什么显示不了,我把我的所有代码删掉就可以

gaozai 发表于 2017-4-13 19:13:01

您好楼主 您能把html代码发一下吗 谢谢谢谢

ifyou 发表于 2017-11-21 15:01:51

你好我想问下   你是如何让分页器很多可以滚动的?

web_小虾米 发表于 2018-12-8 15:56:07

求一个demo

yanguoqiang29 发表于 2019-6-10 15:26:43

同求一个DEMO,我的会出现缩略图显示不全的问题。
还有如果手动把缩略图那一行拖动一下,有很大几率造成顺序出错
页: [1] 2
查看完整版本: 关于Swiper基础演示中,缩略图控制的一些问题!