swiper实现类似虎牙斗鱼直播平台竖向轮播图样式

先上最终效果图

直接上代码

     <div class="bg_banner"><div class="bg_banner_player"><div class="swiper-box" style="height: 500px" v-if="is_ok"><!-- swiper1 --><swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop" @click-slide="handleClickSlide"><swiper-slide class="slide-1" v-for="(item,index) in list" :key="index"><div @mouseover="over_it" @mouseout="mask_show=false" class="slide_in" :style="{backgroundImage: `url(${(item.cover)})`,backgroundPosition:'center',backgroundSize:'100% 100%'}"><img :src="item.cover" alt="" ><div class="mask" v-show="mask_show"><div class="mask_btn" @click="to_detail(item)">进入直播间</div></div></div></swiper-slide><div class="swiper-button-next swiper-button-white" slot="button-next"></div><div class="swiper-button-prev swiper-button-white" slot="button-prev"></div></swiper><!-- swiper2 Thumbs --><swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs" @ready="handleSwiperReadied"><swiper-slide class="slide-1" v-for="(item,index) in list" :key="index"><img :src="item.cover" alt=""></swiper-slide></swiper></div></div></div>return {mask_show:false,is_ok: false,list: [],swiperOptionTop: {loop: true,loopedSlides: 5, // looped slides should be the samespaceBetween: 10,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}},swiperOptionThumbs: {loop: true,loopedSlides: 5, // looped slides should be the samespaceBetween: 10,centeredSlides: true,slidesPerView: 'auto',touchRatio: 0.2,direction: 'vertical',slideToClickedSlide: true},}self.$nextTick(() => {const swiperTop = self.$refs.swiperTop.$el.swiperconst swiperThumbs = self.$refs.swiperThumbs.$el.swiperswiperTop.controller.control = swiperThumbsswiperThumbs.controller.control = swiperTop})<style scoped>.bg_banner {width: 100%;background-image: url("/static/NzI5ZGQ1NDEtODY1Yy00ODY3LWI1NWQtZWQ1OTc4OWU5ZjE5.jpg");/*min-height: 500px;*/position: relative;background-repeat: no-repeat;background-size: cover;background-position: center 0;box-sizing: border-box;padding: 2rem;}.slide-1 {cursor: pointer;}.swiper-box {width: 100%;display: flex;justify-content: space-between;}.mask{width: 100%;height:100%;z-index: 2;background:rgba(0,0,0,0.4);position: absolute;top:0;left:0;display: flex;align-items: center;justify-content: center;}.mask_btn{width: 200px;height: 56px;background-color: #111;opacity: .7;border: 1px solid #ff9600;border-radius: 30px;display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: 700;cursor: pointer;color:white;}.mask_btn:hover{color:#ff9600;background-color:white;}.slide_in{height:500px;width: 100%;position: relative;}.gallery-top {width: 80% !important;height: 500px;}.gallery-top img {height: 100%;}.gallery-thumbs {width: 20% !important;box-sizing: border-box;padding: 0;}.gallery-thumbs img {height: 100px;}.gallery-thumbs .swiper-slide {width: 100%;height: 100px;opacity: 0.4;}.gallery-thumbs .swiper-slide-active {opacity: 1;}.bg_banner_player {width: 1140px;margin: 0 auto;}.bg_banner_player img {width: 100%;}

swiper实现类似虎牙斗鱼直播平台竖向轮播图样式相关推荐

vue项目中使用swiper实现中间大，两边小的轮播图
前言项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来实现效果如下: 下面我们来看下实现步骤: 第一步:首先在项目index.h ...
微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换
一.前言 swiper组件自带autoplay切换,本文将会介绍如何用到左右按钮切换轮播图,以及如何解决快速点击按钮出现的bug. 核心属性 circular: 负责切换衔接的效果(否则最后一张与第一 ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
层叠轮播图、小程序3D轮播图、小程序轮播图、折叠轮播图、叠式轮播图、微信小程序叠式轮播图实现、小程序层叠轮播图swiper、Taro层叠轮播图、Taro叠式轮播图
好久没写博客了,最近这项目中有个叠式轮播的需求在网上找了一堆都没有自己想要的最开始被 TaroUI和小程序自带的swiper困扰一直以为是swpier的升级版试了好久也没改造成功干脆自 ...
七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
文章目录一.swiper 轮播图 1.1. swiper 基本使用 1.2. 调整轮播图和图片的大小二.scroll-view 可滚动视图区域一.swiper 轮播图轮播图是项目中最常见的功能 ...
在vue中使用swiper轮播图（亲测有效）
在vue中使用swiper轮播图(亲测有效) 1.新建vue项目 2.装swiper的包 3.使用swiper 网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的, ...
使用selenium自动爬取斗鱼直播平台的所有房间信息
使用selenium自动爬取斗鱼直播平台的所有房间信息文章目录使用selenium自动爬取斗鱼直播平台的所有房间信息使用selenium实现动态页面模拟点击什么是selenium? selen ...
移动直播之网红主播怎样将直播内容推到斗鱼直播平台的方案
移动直播之网红主播怎样在没有电脑的情况下将直播内容推到斗鱼直播平台 1. 概要斗鱼直播平台支持第三方推流,本文描述如何用ENC1编码器推流给斗鱼直播平台 1.1 设备连接准备4G模块[参考链接] ...
selenium抓取斗鱼直播平台数据
https://www.cnblogs.com/xinyangsdut/p/7617691.html 程序说明: 抓取斗鱼直播平台的直播房间号及其观众人数,最后统计出某一时刻的总直播人数和总观众人数. ...

swiper实现类似虎牙斗鱼直播平台竖向轮播图样式

swiper实现类似虎牙斗鱼直播平台竖向轮播图样式相关推荐

最新文章

热门文章