推荐最新

如何在Nuxt3项目中成功引入Swiper插件?

怎么在Nuxt3项目中引入swiper插件？在网上找到的教程几乎都是vue项目或nuxt2，多次在Nuxt3项目中尝试引入swiper一直失败，我的vue版本是3.4

浏览量192

nuxt.js 使用vue-awesome-swiper提示getComputedStyle' on 'Window': parameter 1 is not of type 'Element'?

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240928/46a4a7b9d62960ef92d735c73ea5f126.png) nuxt.js 使用vue-awesome-swiper提示Failed to execute getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. 代码如下：网上有人说class需要使用swiper-wrapper，但是还不行,"@slideChange="onSlideChange""也没出发

浏览量205

雾里

vue2的 ssr 渲染 nuxt.js 使用vue-awesome-swiper新老数据混合存在怎么回事？

vue2 使用vue-awesome-swiper3.1.3，服务端渲染nuxt.js, 我擦，坑是真特么多，一步一个坑，坑死人了。现在是数据更新后，新老数据都存在，导致，activeIndex，realIndex 都不对。有人遇到过吗？如何解决？

浏览量203

大厂球袋

如何修改轮播图样式？

Hot Products Our Crousher Parts has been perfected over the past 20 years to ensure they are reliable and efficient on site. Slide 8 Slide 9 Slide 10 Slide 4 Slide 1 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 1 Slide 2 Slide 3 .lyIdx_Pro { position: relative; } .lyIdx_Pro .pro_swiper { width: 100%; position: relative; top: 80px; height: 600px; } .lyIdx_Pro .pro_swiper .swiper-container { width: 100%; height: 100%; } .lyIdx_Pro .pro_swiper .swiper-slide { width: 326px !important; text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; transition: 300ms; /* transform: scale(0.8); */ } .lyIdx_Pro .pro_swiper .swiper-slide img { width: 100%; } .lyIdx_Pro .pro_swiper .swiper-slide-active, .lyIdx_Pro .pro_swiper .swiper-slide-duplicate-active { width: 692px !important; /* transform: scale(1); */ } var swiper = new Swiper('.lyIdx_Pro .pro_swiper .swiper-container', { slidesPerView: 3, spaceBetween: 20, centeredSlides: true, loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, }); "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240927/44c896fe56c645d9cfbcd0250153db89.png) "图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240927/c7902c69bbf94b9b168d3cc9a4fb8c99.png)

浏览量148

一一在debug

swiper中的图片如何懒加载，还是根本不做懒加载？

swiper中的图片如何懒加载，还是根本不做懒加载？求大佬指教！！！

浏览量119

时光旅人

如何在Swiper中实现淡出淡入切换效果？

swiper 设置切换效果不生效 :effect="fade" :fadeEffect="{ crossFade: true }" 我想将swiper切换效果设置成淡出淡出这种但是我在代码中这样子设置没有生效是为什么在控制台报了个 fade在渲染期间被访问，但没有在实例中定义使用的swiper版本为8.3.2 啊啊啊

浏览量114

笑面猫

web的pc版应用js库与移动版的区别？

web的pc版应用js库与移动版的区别？比如Pc版用了jquery/swiper/jquery.lazyload.js 移动版呢，我知道好像是zepto代替jquery,后面两个呢，是一样，还是也有类似替代？

浏览量25

走你啊啊啊啊啊

swiper ,怎么修改除中间外，其他的slide 的透明度？

效果如下图所示，"creativeEffect"里面设置了"opacity"为0.8，但是现在最底层的透明度还是没有变，想要的效果是除了中间的色块，其他色块元素透明度都是0.8,这种要怎么改？ "3b559e262e3f3063d56884227bd3e09.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/219223a1aaa32fbbdcf74688adc63a10.png) swiper叠加轮播图 body { display: flex; align-items: center; justify-content: center; } /* 外层容器 */ .swiper { width: 1310px; height: 482px; } .swiper-wrapper { width: 1216px; height: 482px; } /* 轮播项 */ .swiper .swiper-slide { width: 387px; height: 482px; font-size: 32px; font-weight: 500; color: #ffffff; /* 文字垂直居中 */ display: flex; justify-content: center; align-items: center; /* opacity: 0.5 !important; */ } .swiper .swiper-slide-active { /* opacity: 1 !important; */ } /* 色彩来源：https://color.uisdc.com/ */ .swiper .swiper-slide-1 { background-color: #425066; } .swiper .swiper-slide-2 { background-color: #b88ed6; } .swiper .swiper-slide-3 { background-color: #9d2933; } .swiper .swiper-slide-4 { background-color: #003371; } .swiper .swiper-slide-5 { background-color: #4c8dae; } .swiper .swiper-slide-6 { background-color: #72db09; } .swiper .swiper-slide-7 { background-color: #f72905; } .swiper .swiper-slide-8 { background-color: #03a8fb; } .swiper .swiper-slide-9 { background-color: #9803fb; } /* .swiper-button-prev { width: 34px; height: 34px; background: url("./img/prev.png") no-repeat; background-size: 100% 100%; } .swiper-button-next { width: 34px; height: 34px; background: url("./img/next.png") no-repeat; background-size: 100% 100%; } 去除默认的操作按钮样式 .swiper-button-next:after, .swiper-button-prev:after { display: none; } */ 1 2 3 4 5 6 7 8 9 --> const swiper = new Swiper('.swiper', { //默认第几个在中心位置显示，总数量中间的一个，计算 initialSlide: 2, autoplay: false, slidesPerView: "3", centeredSlides: true, effect: "creative", loop: true, grabCursor: true, creativeEffect: { prev: { translate: ['-40%', 0, 0], // 偏移量 origin: "center center", scale: 0.85, // 缩放量 opacity: 0.8, shadow: true, // 是否加阴影 }, next: { translate: ['40%', 0, 0], origin: "center center", scale: 0.85, opacity: 0.8, shadow: true, }, limitProgress: 2, // 显示五个堆叠的最重要的这个属性，后面依次以前面属性等比配置 shadowPerProgress: true, //是否等比配置透明度 }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); // 监听改变事件 swiper.on('slideChange', (e) => { console.log(e.realIndex); });

浏览量16