再次使用vue-awesome-swiper做异形轮播

先上效果图

依旧是面对百度编程，在vue中使用swiper最重要的就是用对版本，npm i 了几个版本后有各种细节问题，最后找到最佳组合
vue-awesome-swiper@3.1.3
swiper@4.5.1

npm install swiper@5.3.6 --save
npm i vue-awesome-swiper@3 -S

页面按需引入

html代码

<swiper class="mySwiper" :options="swiperOption" ref="mySwiper"><!-- 添加的图片 --><swiper-slide><div class="active_font">永宁今日完成落地上图</div><div>46亩</div></swiper-slide><swiper-slide><div class="active_font">同心今日完成落地上图</div><div>46亩</div></swiper-slide><!-- <div class="swiper-pagination" slot="pagination"></div> --></swiper>

js代码

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {components: {swiper,swiperSlide,},data() {return {swiperOption: {loop: true,// observer: true, //修改swiper自己或子元素时，自动初始化swiper// observeParents: true, //修改swiper的父元素时，自动初始化swiperslidesPerView: 3,slideToClickedSlide: true, //设置为true则点击slide时会在这个slide产生过渡centeredSlides: true,autoplay: {delay: 1000,pauseOnMouseEnter:true},spaceBetween: 1,direction: "vertical",on: {//这里是点击事件，按需求来},},}
}

做完后，其中最麻烦的其实css，得一点一点调
css代码

.swiper-container {height: 100px;
}
.swiper-wrapper .swiper-slide {height: 36px !important;display: flex;align-items: center;justify-content: space-between;color: #bdb9b9;}
/deep/.swiper-wrapper {height: 36px;width: 85%;margin: 0 auto;
}
.swiper-slide {width: 85%;margin: 0 auto;
}
.swiper-wrapper,
.swiper-slide-active {width: 100% !important;color: #fff!important;font-size: 16px;padding-left: 20px;background: url("~@/assets/img/left_icon.png") no-repeat;background-position: -2px 8px;right: 10px;
}
.swiper-wrapper,
.swiper-slide-active .active_font{margin-left: 10px;
}

再次使用vue-awesome-swiper做异形轮播相关推荐

VUE如何快速做一个轮播图
1. 第三方插件 https://github.com/surmon-china/vue-awesome-swiper npm install swiper vue-awesome-swiper -- ...
swiper轮播---异形轮播
swiper轮播-异形轮播最近经常会碰到很多用swiper插件做各种各样轮播图的需求,没有做过3d异形轮播图,所以研究了一下,把经验给大家分享一下上面图片就是轮播图所要达到的效果:焦点图片居中并向 ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
使用swiper_关于使用swiper制作web轮播图
我这个方法是很适用于小白的,利用swiper插件的应用.https://www.swiper.com.cn/这个是swiper中文官网的网址,上面有关于swiper的说明和使用方法.想要用到swipe ...
php广告轮播效果,使用swiper组件实现轮播广告效果
这次给大家带来使用swiper组件实现轮播广告效果,使用swiper组件实现轮播广告效果的注意事项有哪些,下面就是实战案例,一起来看一下. 1.安装swipernpm install swiper@3 ...
【uni-app】swiper 实现纵向轮播，且支持鼠标滚轮滚动翻页
前言 swiper 实现纵向轮播,且支持鼠标滚轮滚动翻页操作方法(亲测可用) https://www.w3h5.com/post/607.html
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播的问题. 参考文章: (1)解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播 ...
jQuery实现异形轮播图
思路: 异形轮播图与普通轮播图不同的一点,是异形轮播图一次性展示多个图片,且图片大小的位置会动态变化. 以往我的处理办法都是直接给要展示的图片动态的添加一个class类, 简单粗暴.这次我在很多地方都 ...
jquery异形轮播
jquery异形轮播 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

再次使用vue-awesome-swiper做异形轮播

再次使用vue-awesome-swiper做异形轮播相关推荐

最新文章

热门文章