查看: 1162|回复: 0
打印 上一主题 下一主题

怎么样才能让thumbs同时控制两个swiper呢

[复制链接]

该用户从未签到

1

主题

2

帖子

12

积分

新手上路

Rank: 1

积分
12
跳转到指定楼层
楼主
发表于 2021-12-30 16:00:28 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
                        var thumbsslider = new Swiper(".thumbsslider", {
                                spaceBetween: 10,
                                slidesPerView: 10,
                                freeMode: true,
                                watchSlidesProgress: true,
                        });
                        var txtswiper = new Swiper(".txtswiper", {
                                loop: true,
                                speed: 1000,
                                grabCursor: true,
                                watchSlidesProgress: true,
                                mousewheelControl: true,
                                keyboardControl: true,
                                navigation: {
                                        nextEl: ".swiper-button-next",
                                        prevEl: ".swiper-button-prev"
                                },
                                pagination: {
                                        el: ".swiper-pagination",
                                        type: "progressbar",
                                },
                               
                                thumbs: {
                                        swiper: thumbsslider,
                                       
                                }
                        });
                        var solutionpic = new Swiper(".solutionpic", {
                                loop: true,
                                speed: 1000,

                                watchSlidesProgress: true,


                                navigation: {
                                        nextEl: ".swiper-button-next",
                                        prevEl: ".swiper-button-prev"
                                },
                                pagination: {
                                        el: ".swiper-pagination",
                                        type: "progressbar",
                                },
                                on: {
                                        progress: function(swiper) {
                                                for (var i = 0; i < swiper.slides.length; i++) {
                                                        var slideProgress = swiper.slides[i].progress;
                                                        var innerOffset = swiper.width * interleaveOffset;
                                                        var innerTranslate = slideProgress * innerOffset;
                                                        swiper.slides[i].querySelector(".slide-inner").style.transform =
                                                                "translate3d(" + innerTranslate + "px, 0, 0)";
                                                }
                                        },
                                        touchStart: function(swiper) {
                                                for (var i = 0; i < swiper.slides.length; i++) {
                                                        swiper.slides[i].style.transition = "";
                                                }
                                        },
                                        setTransition: function(swiper, speed) {
                                                for (var i = 0; i < swiper.slides.length; i++) {
                                                        swiper.slides[i].style.transition = speed + "ms";
                                                        swiper.slides[i].querySelector(".slide-inner").style.transition =
                                                                speed + "ms";
                                                }
                                        }
                                },
                                thumbs: {
                                        swiper: thumbsslider,
                               
                                }
                        });

目前这样的话,谁在前面就能控制谁,后面的就不行了

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-24 16:15 , Processed in 0.074100 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表