随笔分类 -  swiper

摘要:一般都用自定义的前进后退按钮: <!-- 导航按钮 --> <div class="arrowCard swiper-button-prev"> <img src="assets/arrow01.svg" alt="云智慧" /> </div> <div class="arrowCard swipe 阅读全文
posted @ 2022-09-09 14:31 SimoonJia 阅读(1440) 评论(0) 推荐(0) 编辑
摘要:this.activeIndex 循环模式下 会自动生成多个sild。操作不需要对它进行加减操作即可一一对应 index.html <!-- * @Author: 作者 * @Date: 2022-06-29 17:24:35 * @LastEditors: Simoon.jia * @LastEd 阅读全文
posted @ 2022-07-25 00:22 SimoonJia 阅读(97) 评论(0) 推荐(0) 编辑
摘要:1.正常做出自适应的slide 2.把slide文字内容与分页器放在同一个盒子里,分页器 绝对定位(设置bottom) ,文字内容正常设置为block(靠文字内容撑开父盒子,且分页器可以一直居于最下方,并且文字换行不会影响整体布局) 3.使用swiper内置方法 slideChangeTransit 阅读全文
posted @ 2022-07-24 23:39 SimoonJia 阅读(781) 评论(0) 推荐(0) 编辑
摘要:mySwiper.activeIndex 返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。 slideChangeTransitionStart(swiper) slideChangeTransitionEnd(swiper) <script language="j 阅读全文
posted @ 2022-07-24 16:41 SimoonJia 阅读(314) 评论(0) 推荐(0) 编辑
摘要:swiperInstance.update({ slidesPerView: status == "pc" ? 1.354 : 1.253, coverflowEffect: status == "pc" ? { rotate: 0, stretch: "34%", depth: 841, // m 阅读全文
posted @ 2022-07-04 12:42 SimoonJia 阅读(387) 评论(0) 推荐(0) 编辑
摘要:.swiper-button-next .swiper-button-prev。前进后退按钮 .swiper-slide-prev .swiper-slide-next 左右副slid(未展示的slid) .swiper-pagination 下方分页展示器 阅读全文
posted @ 2022-07-03 17:17 SimoonJia 阅读(69) 评论(0) 推荐(0) 编辑
摘要:new Swiper(".swiper", { initialSlide: 1, centeredSlidesBounds: true, slidesPerView: status == "pc" ? 1.354 : 1.253, //视图层显示的sild个数 centeredSlides: tru 阅读全文
posted @ 2022-07-03 17:14 SimoonJia 阅读(610) 评论(0) 推荐(0) 编辑
摘要://前进后退按钮去除点击时样式(背景会变蓝一下) .ProductToNumber .arrowCard { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) /* 去除点击样式 */}设置在前进后退按钮里 //自带按钮颜色样式 --swiper-theme 阅读全文
posted @ 2022-07-03 16:57 SimoonJia 阅读(315) 评论(0) 推荐(0) 编辑
摘要:把stretch设为百分比值。 记得加单引号。否则报错 阅读全文
posted @ 2022-06-30 19:19 SimoonJia 阅读(11) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示