使用 Swiper 快速实现 3D 效果旋转
最编程
2024-06-15 18:35:32
...
最近经常接到轮播图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
两个类名对上一张下一张轮播进行缩小, 达到中间大而两边小的效果。如果想调整前后两张轮播的上下位置,可以使用translateY()
进行设置。
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 气流旋转
推荐阅读
-
JS 实现 3D 立体效果的首页旋转图(瞬间让你的网站高大上、逼格满满)
-
如何使用 Swiper 3D 气流旋转
-
使用 Swiper 快速实现 3D 效果旋转
-
vue-awesome-swiper 实现了 3D 旋转图表
-
vue3 使用刷卡器实现旋转图表(两个小的中间缩放效果旋转图表)
-
如何使用 JS 实现 3D 赛车效果
-
Adobe国际认证中文官方网站】Adobe中国摄影计划,免费安装正版激活--Adobe Creative Cloud中国摄影计划。与此同时,Adobe宣布天猫为Adobe Creative Cloud中国摄影计划的电商战略合作伙伴,并将与其合作上线Adobe天猫官方旗舰店。 此举无疑一方面扩大了Adobe在中国的影响力,另一方面也有助于国内用户更好地培养正版软件意识,推动Adobe软件在中国的正版化进程。 网络异常,图片无法显示 ||网络异常 Adobe Creative Cloud中国摄影计划包括Photoshop和Lightroom Classic两大桌面创意工具,以及iOS版Photoshop Express。 其中,Adobe Lightroom Classic和Adobe Photoshop作为两款常用的图像处理软件,对于那些玩摄影、后期修图的创意设计人群无疑有着巨大的帮助,而LR+PS套装对于摄影领域用户的重要性自不必说,正版产品的性能实时更新也可以放心!体验最新功能,对于新镜头(补偿)和机身(RAW 读取)都能第一时间适应。不信你看: Photoshop 图像合成 裁剪、移除对象、润饰合成照片、玩转色彩和特效,创建精美图片和艺术品! Lightroom Classic 照片编辑 轻松批量管理和编辑照片,内置专业创意控件和摄影师预设,让你的照片大放异彩。 手机 PS 便捷编辑 Photoshop Express 支持多种滤镜、贴纸,手机即可完成抠图、除雾等任务 人工智能编辑工具 神经滤镜、快速点击选区、自动选择主题等人工智能功能让图像编辑更轻松 创意画笔内容识别 定制艺术画笔工具,实现个性化效果;内容识别填充,智能去除无用物体。 Adobe Creative Cloud 中国摄影计划的推出,为中国的专业摄影师、摄影爱好者、后期修图和其他创意设计人员带来了全方位的内容和体验。 网络异常,图片无法显示 ||网络异常 当然,不可否认的是,"由于盗版软件缺乏开发、维护和升级成本,销售价格远低于正版软件。再加上很多普通人并不需要使用正版软件的复杂功能,版权观念较淡,还是有大量的创意设计人员会选择盗版软件"。 但事实上,当所有的软件都不再是单一的软件,而是变成一种服务时,单机版盗版的存在就逐渐成为鸡肋。因为有太多的服务让你即使是所谓的 "完美破解",也无法享受,Adobe Cloud 就是一个很好的例子,所谓的完美破解,你只能使用 "Adobe "的一半,对于更精彩的 "云",只能望云兴叹。更何况,越来越多的设计工具从免费走向付费,越来越多的设计师和企业已经接受了付费使用的模式。 其次,对于互联网时代的企业数字化转型而言,数字化合规至关重要。21年来,使用盗版PS和未经授权的方正字体被指侵权的事情闹得沸沸扬扬,虽然新闻真假难辨,但也给使用盗版工具的用户敲响了警钟。 付费使用正版工具,可以更放心地进行设计,不用担心版权风险!
-
在反应原生中使用 Animated 实现三张图片动态旋转的效果 - 示例代码
-
实现旋转效果的 Swiper