轮播图外嵌套一层选项卡，swiper轮播图不能轮播，求前端师傅解决

轮播图外嵌套一层选项卡，swiper轮播图不能轮播，求前端师傅解决，
效果是，点击选项卡，可以切换整体轮播图，而且每个选项卡下的轮播图都可以正常轮播

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
CSDN专家-showbo 2022-04-10 21:25
关注
切换到对应tab的swiper后，调用swiper实例的updateSize方法重新计算Swiper的尺寸试试
https://www.swiper.com.cn/api/methods/252.html

本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(1条)

报告相同问题？

关注问题

在vue组件中使用swiper，为什么轮播图滑动不了呢 css3 html 前端
2022-11-15 22:10

回答 3 已采纳理论上不应该有问题，看下是否有报错？话说pc端有element ui。移动端有vant ui，怎么偏偏选择了swiper
请问请问为什么我的轮播图不能显示完全啊微信小程序
2022-02-16 16:33

回答 3 已采纳看着图片不是完全的吗？swiper、image 都需设置高度
swiper轮播图的分页器显示在图片外面 javascript vue.js 有问必答
2021-10-17 16:24

回答 1 已采纳调整下导航容器样式swiper-pagination内容 .wrapper >>> .swiper-pagination bottom: 20px
Swiper.js：不识这个轮播图js库，说明你的前端还未入门
2024-02-25 10:04

贝格前端工场的博客更多关于 Swiper.js 在 Vue 中的用法，请参考 Swiper.js 的官方文档。以上只是一些常用的配置项，Swiper.js 还提供...这只是一个简单的示例，Swiper.js 还提供了更多的选项和功能，可以根据具体的需求进行配置和使用。
swiper插件使用轮播图 html javascript 前端
2022-10-15 13:50

回答 3 已采纳 CSS的确是用link引入，但是JS需要用script，文件路径放在src。 <script src="./js/index.js"></script> 如有帮助请采纳，谢
ant design mobile V5.22里的轮播图组件引入后调整不了轮播图的高度？ javascript react.js 前端
2022-09-06 23:52

回答 1 已采纳你审查元素看看加上了没有怀疑没加上
滑动背景中轮播图不显示 css 前端有问必答
2022-09-19 15:10

回答 2 已采纳结构是不是搞错了？swiper应该是在swiper-wrap容器里面吧？而且宽度设置也是有问题。。.swiper-text应该是flex:1，去掉width，不去掉也行.swiper-wrap加上fl
每个tab选项卡里都是swiper轮播插件怎样分开控制左右箭头？
2017-07-19 08:32

Charis-Cai的博客简单描述一下我做的效果，就是三个tab切换，开始做的时候，只有第一个选项卡里面的左右箭头能动，后面两个选项卡不能切换，后来这么解决的：因为选项卡里都是swiper轮播效果，而且又是用左右箭头...
swiper轮播图使用v-if隐藏再显示后空白 html vue.js 有问必答
2022-08-07 16:28

回答 3 已采纳 v-if是重新生成dom，需要重新初话过一次swiper，就是window.onload中的代码放到一个函数里面，在显示的时候重新调用一次。比如下面这样，在v-if显示swiper的代码后面用next
react，使用ant mobile里的swiper走马灯组件，axios获取轮播图数据报错？ javascript react.js 前端
2022-09-29 20:37

回答 2 已采纳建议最好给个根元素。 return( <> <Space> </Space> </> )
请问 轮播图 swiper 为啥报错呢？前端
2022-02-12 09:27

回答 3 已采纳引入错误了吧
在页面的每个tab切换块里嵌套swiper轮播
2016-12-09 13:30

鲤鱼旗上打妖怪的博客在一个页面里可以同时放多个swiper轮播，但是放在tab切换里，问题就很多。结构如下，‘main-content’是两个需要切换的tab内容块，每个'main-content'里都有一个‘swiper-container’。（对于swiper插件自带的...
Vue中使用 vue-awesome-swiper 插件实现轮播图效果
2019-08-13 10:34

吃茶去吖的博客 Vue中使用 vue-awesome-swiper 插件实现轮播图效果 1、npm导入对应的包： npm install vue-awesome-swiper --save 2、main.js中添加： import VueAwesomeSwiper from ‘vue-awesome-swiper’ import ‘swiper/dist/...
bootstrap的Tab页里放swiper轮播图
2020-12-14 17:10

日富一日付小姐的博客 Tab页里放轮播图 $('.media_tab a[data-toggle="tab"]').on('show.bs.tab', function(e) { // tab切换时，往swiper容器里存入一个swiper实例，如果相应的实例已经存在，跳过 var selector = '.media_swiper_...
Tab内嵌Swiper轮播图(快速完成产品需求，请使用本例)
2018-12-15 19:43

jingtian678的博客于是出现了一个很尴尬的问题，第一个Swiper可以正常切换，但是第二个轮播图却无法正常运行，卡顿。检查了代码后发现问题主要来源于display:none; 我加上了这个隐藏属性后，第二个轮播一定会出问题。 ...
没有解决我的问题, 去提问