使用Swiper快速实现3D效果轮播
最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用。
具体实现效果如下:
在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue。
原生实现
引入
首先我们介绍原生的使用方式,按照swiper官方文档引入swiper.min.css
和swiper.min.js
。
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.1/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.1/js/swiper.min.js"></script>
html结构
html结构如下:
<!--教师介绍-->
<div class="jieshao">
<div class="swiper-container2">
<div class="swiper-wrapper">
{volist name="teacherInfo" id="vo"}
<div class="swiper-slide">
<img class="swiper-img" src="__CDN__{$vo.image}" alt="" />
<div class="lay-pop">
<div class="lay-pop-box">
</div>
<div class="title">
{$vo.name}
</div>
<div class="desc">
{$vo.description}
</div>
</div>
</div>
{/volist}
</div>
</div>
</div>
css结构
css结构如下:
.jieshao{
width: 1080px;
height: 551px;
margin: auto;
overflow: hidden;
}
.swiper-slide{
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
border-radius: 26px;
position: relative;
height: 551px;
}
.swiper-img{
position: absolute;
width: 100%;
height: 551px;
border-radius: 26px;
}
.lay-pop{
color: #fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.lay-pop-box{
position: absolute;
width: 100%;
height: 100%;
background: #000000;
border-radius: 26px;
opacity: 0.18;
}
.lay-pop .title{
color: #fff;
font-size: 30px;
font-weight: bold;
padding: 25px 30px 14px 40px;
position: relative;
z-index: 1;
}
.lay-pop .desc{
width: 100%;
height: 112px;
font-size: 12px;
font-weight: 400;
padding: 0 30px 10px 40px;
margin-bottom: 24px;
color: #fff;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
word-break:break-all;
position: relative;
z-index: 1;
}
.swiper-slide-prev {
transform: scale(0.9);
opacity: 0.3;
}
.swiper-slide-next {
transform: scale(0.9);
opacity: 0.3;
}
.swiper-slide .lay-pop{
display: none;
}
.swiper-slide-active .lay-pop{
display: block;
}
js结构
js结构如下:
var mySwiper = new Swiper ('.swiper-container2', {
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
slidesPerView: 3,
spaceBetween: 2,
centeredSlides: true,
centeredSlidesBounds: true,
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
loop: true,
})
主要通过slidesPerView
设置需要显示轮播的数量,并通过swiper-slide-prev
,swiper-slide-next
两个类名对上一张下一张轮播进行缩小, 达到中间大而两边小的效果。
Vue实现
vue使用中还是有几个小坑的,需要大家注意一下。
安装
首先安装Swiper包npm i swiper
。
引入
我目前安装的最新版Swiper是6.3.5版的, 如果是6.x的版本在这里务必要注意如果需要分页器以及自动轮播都是需要引入对应在Swiper里的组件的。
import 'swiper/swiper-bundle.css'
import Swiper, { Pagination, Navigation, Autoplay } from 'swiper';
Swiper.use([Pagination, Navigation, Autoplay]);
具体使用
<div v-if="images.length" class="banner">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide v-for="item of images" :key="item.id">
<img class="banner-image" :src="item.image" alt="" />
<!-- <div class="title">{{ image }}</div> -->
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
swiperOptions配置:
swiperOptions: {
pagination: {
el: ".swiper-pagination",
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
effect: "coverflow",
slidesPerView: 1.2,
spaceBetween: 2,
loopedSlides: 5,
centeredSlides: true,
centeredSlidesBounds: true,
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
loop: true,
},
<style lang="scss">
.home {
.swiper-slide {
width: 340px;
background-color: #ebedf0;
border-radius: 6px;
.banner-image {
border-radius: 6px;
}
}
.swiper-slide-prev {
transform: scale(0.9);
}
.swiper-slide-next {
transform: scale(0.9);
}
.swiper-container {
--swiper-theme-color: #fff;
}
.swiper-pagination.swiper-pagination-bullets {
width: auto;
right: 60px;
text-align: right;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: #FFFFFF;
border-radius: 4px;
}
.swiper-pagination-bullet-active {
width: 20px;
height: 6px;
border-radius: 5px;
}
}
</style>
效果
实现的效果如下:
使用Swiper快速实现3D效果轮播的更多相关文章
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
- 实现一个3D图片轮播插件 —— 更新版
前言: 前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用 ...
- 案例:3D切割轮播图
一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...
- 带锁的3D切割轮播图
3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Swiper 3D flow轮播使用方法
swiper 的3d轮播效果,移动端适用 (1). 如需使用Swiper的3d切换首先加载3D flow插件(js和css). <head> <link rel="styl ...
- android实现3D Gallery 轮播效果,触摸时停止轮播
1.轮播控件涉及到的两个类 CarouselViewPager.java public class CarouselViewPager extends ViewPager { @IntDef({RES ...
随机推荐
- openstack常用命令-nova篇
1.查看openstack版本 nova-manage version 2.查看节点 nova host-list 3.查看计算节点 nova hypervisor-list 4.查看计算节点上有哪些 ...
- 一个Wpf的开发框架
引言 本框架使用Prism做MVVM,优点咱就不说了,主要了容器注入,消息和DI,比自己写省很多事.网上有很多标准的MVVM的使用方法,但是没有形成一个系统级的框架.本框架从登录到具体业务的使用,还有 ...
- codeforces 1426F,初学者也能做,div3的最难题
大家好,欢迎阅读codeforces专题. 今天选择的题目是Div3比赛的最后一题,也是最难的一道题.选这道题的主要原因是帮助大家建立信心,因为有些小伙伴给我反应说之前选择的题目有些难了,觉得自己可能 ...
- BT下载器Folx中删除任务与删除文件的功能区别
当用户使用Folx完成了任务下载后,该任务仍会保留在下载列表中,并标注"已结束"的标记.随着使用时间的增长,Folx下载列表中会包含过多的"已结束"任务,用户需 ...
- MindManager中主题间距/线条粗细的灵活调整
在MindManager中,主题和线条是思维导图的基本元素,只有通过它们才能将要表达的思想呈现.并联系起来.因此,关于它们的属性设置就会多一点,如颜色.宽度.位置等.而调整主题之间的距离及线条的粗细, ...
- C语言新手入门
include<stdio.h> int main() { //输入一个数 输出它的反序列 c int a,b=0; scanf("%d",&a);//输入一个 ...
- Visual Studio 2019 升级16.8之后(升级.Net 5),RazorTagHelper任务意外失败
vs2019升级16.8后,原来.net core 3.1的项目编译时出现了莫名其妙的错误: 1. "RazorTagHelper"任务意外失败 2. ...provide a v ...
- sqli-labs-master 闯关前知识点学习
1).前期准备.知识点 开始之前,为了方便查看sql注入语句,我在sqli-labs-master网页源码php部分加了两行代码,第一行意思是输出数据库语句,第二行是换行符 一.Mysql 登录 1. ...
- 基于FPGA的VGA显示实验设计
基于FPGA的VGA显示实验设计 成果展示(优酷视频): 视频: 基于FPGA的VGA显示技术(手机控制) http://v.youku.com/v_show/id_XNjk4ODE3ODUy.htm ...
- Ubuntu\Linux 下编写及调试C\C++
一.在Ubuntu\Linux 下编写及调试C\C++需要配置基本的环境,即配置gcc编译器.安装vim编译器,具体配置安装步骤我在这里就不多说了. 二.基本环境配置完了我们就可以进入自己的程序编写了 ...