swiper3实现3D覆盖流轮播效果

最新推荐文章于 2025-02-24 13:55:38 发布

一只胡萝卜

最新推荐文章于 2025-02-24 13:55:38 发布

阅读量2.1k

点赞数

分类专栏： js/jquery swiper.js 文章标签： swiper 上下轮播 3D覆盖流轮播 js 轮播 swiper实现轮播

本文链接：https://blog.youkuaiyun.com/qq_36129701/article/details/106669305

版权

swiper3实现3D覆盖流轮播效果
先上最终呈现的效果图
在这里插入图片描述
左右拖拽下面的图片，上面的文案进行切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>swiper</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="swiper-3.4.2.min.css">
</head>
<style>
    *{
    margin: 0;padding: 0;}
    img{
    display: block;}
    html{
    max-width: 750px;margin: auto;padding: 0;font-family: '微软雅黑';font-size: 0.12rem;}
    
    #team{
    padding: 0.2rem 0;}
    #team .cont .name{
    font-size: 0.15rem;color: black;line-height: 0.3rem;margin-top: 0.1rem;}
    #team .cont .desc{
    font-size: 0.14rem;color: black;line-height: 0.21rem;}
    #team .cont .member{
    margin-top: 0.2rem;}
    #team .cont .member img{
    width: 1.57rem;height: 2.33rem;}