对swiper进行显示或隐藏，swiper无法正常轮播

最新推荐文章于 2022-03-11 10:09:00 发布
最新推荐文章于 2022-03-11 10:09:00 发布
阅读量2.8k 收藏 2
点赞数
文章标签： swiper vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ppx_mqj/article/details/100515262
版权

在项目的时候，根据需求需要对轮播图进行显示和隐藏，在做好轮播之后，再进行显示和隐藏的时候发现轮播无法正常运行了。
然后到swiper中文网查询了一通，终于找到解决的方法了
文档是这么说的：
在这里插入图片描述
同时还要加一个observeParents这个属性值
在这里插入图片描述
来话不多说直接上代码：
在这里插入图片描述
更多请参考swiper中文网：https://www.swiper.com.cn/api/observer/219.html

不胖十斤不改id
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
swiper隐藏后再显示出现轮播失败，navigation按钮失效
Andrew_SJ的博客
07-21 1841
将一个使用Swiper框架的轮播图，先将其设置display: none，然后在页面加载完成后再让其显示。 出现了修改<swiper-container></swiper-container>的display属性后swiper轮播图失效的问题，上下页按钮无法点击，并且页面显示只有第一页。 注意这里使用了isLoaded作为判断，是否显示swiper-wraper。之后在页面加载完后将data中的isLoaded修改为true（初始时isLoaded为false）。 注意这里如果给sw
微信小程序之图片轮播——swiper、在wxss处理文本溢出隐藏
weixin_45917085的博客
11-14 1345
1.图片轮播——swiper swiper：滑块视图容器，其中只可放置swiper-item组件，否则会导致未定义的行为。 常用选项如下： 属性 类型 默认值 说明 indicator-dots boolean false 是否显示面板指示点 indicator-color color rgba（0,0,0,.3) 指示点颜色 indicator-active-color color #000000 当前选中的指示点颜色 autoplay boolean false 是否自动切换
swiper隐藏（display:none）后，在显示轮播失效解决办法
buzhidjiaosha的博客
01-20 1529
添加： observeParents: true, //修改swiper的父元素时，自动初始化swiper observer: true //修改swiper自己或子元素时，自动初始化swiper var mySwiper1 = new Swiper(".mySwiper", { navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, paginati
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
浮生离梦的博客
12-31 2799
一、需求问题 在之前的项目开发中，使用了swiper插件。由于是vue项目，对于swiper的轮播图我们使用了v-show命令，进行动态隐藏与显示。只有当点击进行一些操作以后，swiper的轮播图才会显示出来。但是，在使用v-show命令以后，swiper的轮播图显示和分页不正常，样式出现问题，无法正常显示。 二、需求分析 在swiper的配置中，我们一开始进行配置了pagination和pagi...
解决swiper在标签页里面 先隐藏后显示 之后 的一系列问题
第7维度 - 日常笔记
07-12 3830
方法一：当页面很简单的时候，比如 页面时只有一个标签页，那么我们直接用最简单的方法，直接看官网就可以啦API就可以啦，里面提供了API —–&gt; http://www.swiper.com.cn/api/observer/218.html 如下就是啦： var swiper = new Swiper('.newlb2 .swiper-container', { paginatio...
swiper实现异形轮播效果
10-15
在本文中，我们将探讨如何使用Swiper库来实现一种特殊的轮播效果——异形轮播。Swiper是一款流行的JavaScript库，常用于创建响应式的滑动内容，如轮播图、幻灯片展示等。它的强大之处在于其丰富的自定义选项和良好的...
js使用swiper实现层叠轮播效果实例代码
12-09
swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了，下面就来开始本文的正文内容 实现过程： 一.移动端-需求swiper 4.0.3实现层叠轮播 ...
swiper移动端轮播插件（触碰图片之后停止轮播）
08-28
Swiper 是一款强大的移动端触摸滑动插件，广泛应用于网页轮播、幻灯片展示等场景。在移动端应用中，为了提供更好的用户体验，有时我们希望用户触碰或交互后轮播停止，直到用户完成操作后再恢复自动轮播。这篇内容将...
swiper焦点轮播图实例
04-23
前端开发swiper焦点图实例，类似于https://www.swiper.com.cn/demo/web/index.html所示效果。
swiper.js在隐藏/显示切换时，轮播出现bug的解决办法
weixin_30906701的博客
06-21 898
swiper在swiper-container正常状态下显示，轮播是没有问题，但是当swiper-container由隐藏切换至显示时（比如做图片查看时）会出现滑动bug，滑动卡顿而且最后一张可以移出可视区域， 出现问题的原因是分页器没有更新，所以要监控分页器的状态，官方提供一个属性 observe（observeParents）默认值false，修改为true即可，在切换container...
使用swiper插件，隐藏swiper后再显示，不会触发自动播放的解决办法
weixin_34006965的博客
12-20 1209
问题： 项目中有一个需求，当点击P1时，两个页面进行轮播。当点击P2时，页面不轮播。 设置好以后，点击P2，再点击P1，此时页面不能自动轮播，只能手动触发。 解决： 在轮播器配置里，配置observer值为true，即可自动初始化swiper。此时不需手动触发，就可自动轮播。 代码如下： swiperOption3: { autoplay: 3 ...
通过按钮实现一个页面多个swiper的显示隐藏出现的问题
huayuaer的博客
09-26 1012
一个页面多个swiper通过按钮显示隐藏出现的问题 描述：一个页面有多个swiper，一开始都隐藏，通过点击按钮显示对应的swiper。 html部分代码： <div class="btn"> <div class="btnBox"> <div class="button button1"></div> <div clas...
swiper 前进后退按钮的显示和隐藏
XD
12-05 4355
swiper 前进后退按钮的显示和隐藏 鼠标进入和离开时，前进后退按钮显示和隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpk
swiper多张轮播图显示分页器，一张不显示
weixin_43936397的博客
12-10 2799
swiper多张轮播图显示分页器，一张不显示 function swiper(){ var mySwiper = new Swiper ('.swiper-container', { // 分页器 pagination: { el: '.swiper-pagination', }, }) if(image<2){ mySwipe...
swiper——vue页面配合显示隐藏渲染两个轮播插件
Juliet_xmj的博客
09-13 725
swiper——vue页面配合显示隐藏渲染两个轮播插件 问题：显示隐藏 项目中使用vue v-show控制轮播盒子不同渲染，但是会出现第一次点击，轮播插件显示出现错误，具体表现为轮播子元素只剩下一个，且为缩小状态，需要多次切换显示轮播才能正常显示 解决： this.$nextick() 1.注意两个轮播盒子要使用不同的父元素，swiper-container不能用做最外层盒子 2.切换显示隐藏方法需要调用加载swiper方法 3.使用this.$nextTick()方法防止swiper方法初始化出现问题
前端分享之swiper 在滚动到第一个或者最后一个时隐藏切换按钮
ygxyvip的博客
01-04 2721
由于需要，在swiper滚动到最后第一个或者最后一个时想要隐藏切换按钮，查看官方API后，没有找到合适的方法，原始只是会将切换按钮变灰（改变了透明度和增加了点击穿透效果），所以只需要将透明度改为0即可实现隐藏，如下： //swiper 左右滑动箭头 第一和最后一个自动隐藏 .swiper-button-disabled{ opacity:0 !important; } ...
【支付宝小程序】显示 / 隐藏控件
来了就为晚--的博客
07-29 3007
一、解决方案 在支付宝小程序项目中，通过条件判断，控制界面上某个控件显示和隐藏。在css样式中，有两种方式可以显示和隐藏控件，即 display 和 visibility。 display： display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。值如下： visibility： visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影
Swiper显示后再隐藏swiper组件时需要做的事情
qq_42855675的博客
02-01 1618
1.在隐藏swiper的同时需要销毁Swiper,所以，在定义swiper时必须要给swiper起一个变量名 data() { return { serviceSwiper: null, serviceSwiperStyle: "", }; }, methods: { async initPolicy() { //需要隐藏swiper的条件 if (this.$store.state.areaId != "37") {
swiper的动态观察者模式解决：swiper所在的页面先隐藏，后显示，swiper不自动播放了
tuzi007a的博客
03-11 1691
swiper的动态观察者模式介绍场景再现问题处理示例 介绍 之前写过一篇swiper在react中的使用，里面介绍了@5.4.5和@6.8.4两个版本的swiepr。 里面也提到了一些常用的属性和方法。今天在项目中遇到个问题， 就是当swiper所在的页面，先隐藏，后显示，swiper就不工作了，自动播放不触发了。 于是，就打开swiper的官方api文档查看。发现了observer观察者模式。 这个模式就是用来监听swiper ，swiper的父元素 , swiper的子元素的，当这些元素发生了变化，
swiper轮播的类名或选择器的嵌套关系
最新发布
07-10
在Swiper轮播组件中，通常有以下类名或选择器的嵌套关系： 1. 外层容器的类名：通常是一个包裹整个Swiper组件的div元素，你可以为该元素添加一个自定义的类名，例如：`.swiper-container`。 2. Slides容器的类名：Slides是包含轮播内容的容器，通常位于外层容器内部，你可以使用`.swiper-wrapper`类名来选择这个容器。 3. 单个Slide的类名：每个轮播项都是一个Slide，你可以使用`.swiper-slide`类名来选择这些Slide元素。 4. 上下切换按钮的类名：Swiper提供了上下切换按钮，默认情况下，它们的类名分别为`.swiper-button-next`（下一张按钮）和`.swiper-button-prev`（上一张按钮）。 基于上述嵌套关系，你可以使用这些类名或选择器来修改Swiper轮播的样式。例如，要修改上下切换按钮的颜色，你可以在less文件中添加如下代码： ```less .swiper-container { .swiper-button-next, .swiper-button-prev { background-color: red; // 修改按钮背景颜色 color: white; // 修改按钮文字颜色 } } ``` 这只是一个简单的示例，你可以根据需要修改其他样式属性来自定义Swiper轮播的上下切换按钮样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值