实现swiper 3d 轮播效果

最新推荐文章于 2024-05-24 17:24:45 发布
最新推荐文章于 2024-05-24 17:24:45 发布
阅读量1.6k 收藏 11
点赞数 18
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45658814/article/details/136525294
版权

先上个效果图，代码可以直接拿~
image.png

安装swiper和vue-awesome-swiper

因为项目用的是nuxt2，所以考虑到swiper的兼容问题，选择的是"swiper": “^5.2.0”

首先是安装swiper和vue-awesome-swiper，并指定版本

npm install swiper@5.2.0 --save

npm install vue-awesome-swiper@4.1.1 --save

然后引入，在nuxt.config.js中引入

css: [
    'swiper/css/swiper.css'
],
plugins: [
    { src: '@/plugins/vue-swiper', ssr: false }
],

基本用法

在plugins下新建一个vue-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

在components下新建一个VueSwiper.vue

<template>
  <div v-if="initStatus" v-swiper:mySwiper="swiperOption" class="swiper mySwiper swiperBox">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in list.value" :key="index">
        <div class="pr">
          <div class="swiper-slide-imgbox uf uf-ac uf-jc">
            <img :src="item.imageUrl" />
          </div>
          <div class="font12 c8 txt-box">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>
<script>
export default {
  props: {
    list: {//banner数组
      type: Object,
      default: function () {
        return {}
      }
    },
    slidesPerView: {//一页显示几个
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      initStatus: false,//初始化状态
      swiperOption: {},//swiper参数
    }
  },
  mounted() {
    let self = this;
    this.$nextTick(() => {
      this.swiperOption = {
        loop: true,
        loopAdditionalSlides: 3,
        coverflowEffect: {
          rotate: 60, //侧转角度（正值凹陷）
          stretch: -80,//每个slide之间拉伸值（正值紧贴）
          depth: 100,  //值越大为远景（可负值）
          modifier: 1, //depth和rotate和stretch的倍率
          shadows: false
       },
        centeredSlides: true,
        initialSlide: 1,
        slidesPerView: self.slidesPerView,//一页显示几个
        spaceBetween: 10,//间隔
        updateOnWindowResize: true,
        watchSlidesProgress: true,//
        noSwiping: true,//
        effect: 'coverflow', //设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
        freeMode: 1,
        autoplay: {//自动轮播//
          delay: 3000, //
          disableOnInteraction: false,//操作swiper后 自动轮播不会停止//
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      }
      this.initStatus = true //渲染swiper
    })
  },
}
</script>
<style lang="scss" scoped>
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-sizing: border-box;
}
.swiper-wraper {
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  box-sizing: content-box;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}
.swiper-slide-imgbox{
  width: 315px;
  height: 302px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  padding: 20px;
  box-sizing: border-box;
}
.pr{
  position: relative;
}
.txt-box{
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
</style>

在plugins下引入

// 引入vue 及 组件
import Vue from 'vue'
import VueSwiper from '@/components/VueSwiper'

// 全局注册组件
Vue.component('VueSwiper', VueSwiper)

然后是使用这个组件，在pages下新建一个honor.vue

<template>
  <div class="main-container">
    <PageHeader />

    <!-- banner -->
    <div class="banner-box">
      <div class="font48 weight700 c3">资质与荣誉</div>
      <div class="font16 weight400 c7 op7 mt30">Qualifications and Honors</div>
    </div>

    <div class="content-box" v-for="(honorItem, index) in honorTypes" :key="index">
      <div class="font36 pt100 mb40 vc" v-if="honorInfo[index] && honorInfo[index].value && honorInfo[index].value.length">{{ honorItem.title }}</div>
      <div class="review-content" v-if="honorInfo[index] && honorInfo[index].value && honorInfo[index].value.length">
        <vue-swiper :list="honorInfo[index]" :slidesPerView="3"></vue-swiper>
      </div>
    </div>

    <PageFooter />
  </div>
</template>

<script>
import { shareToWechat } from "../../utils/format";
export default {
  name: "Honor",

  data() {
    return {
      showType: "honor",
      honorTypes: [],
      honors: [],
      honorInfo: []
    };
  },

  methods:{
    async findHonorTypeData() {
      let _params = {
        order: 'sort'
      }
      this.loading = true;
      const res = await this.$axios.$get("/certType", { params: _params });
      this.loading = false;
      let _this = this
      if (res && res.status === 0) {
        this.honorTypes = res.result
        res.result.forEach((item, i) => {
          _this.findHonorsData(item.title)
        })
      } else {
        this.$message.error(res.message);
      }
    },

    async findHonorsData(certType) {
      let _params = {
        order: 'sort',
        certType: certType,
        pageNum: 1,
        pageSize: 30
      }
      this.loading = true;
      const res = await this.$axios.$get("/certList", { params: _params });
      this.loading = false;
      let _this = this
      if (res && res.status === 0) {
        res.result.rows.forEach((item, i) => {
          item.imageUrl = `/images${item.imageUrl}`
        })
        let _obj = {
          name: certType,
          value: res.result.rows
        }
        _this.honorInfo.push(_obj)
      } else {
        this.$message.error(res.message);
      }
    },
  },

  mounted () {
    this.findHonorTypeData()
  }
};
</script>

<style lang="scss" scoped>
.content-box{
  background-color: rgba(239, 241, 244, 1);
  padding-bottom: 100px;
}
.review-content {
  width: 100%;
  height: 302px;
  position: relative;
  margin: 0 auto;
  .swiperBox {
    height: 360px;
    width: 100%;
    position: static;
    padding-top: 20px;
    & /deep/ {
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 315px !important;
        height: 302px;/* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition-property: all;
        img {
          max-width: 295px;
          height: auto;
          max-height: 282px;
          border-radius: 2px;
        }
        .swiper-slide-shadow-left{
          background-image: none
        }
        .swiper-slide-shadow-right{
          background-image: none
        }
      }
      .swiper-slide-active {
        .mask {
          display: none;
        }
      }
      .swiper-button-prev,.swiper-button-next {
        position: absolute;
        width: 34px;
        height: 64px;
        line-height: 64px;
        border-radius: 6px;
        font-size:30px;
        color: #00A2FF;
        top: 50%;
      }
      .swiper-button-prev:after,.swiper-button-next:after {
        font-size: 30px;
        &:hover{
          background-color: none;
        }
      }
      .swiper-button-prev {
        left: 0px;
      }
      .swiper-button-next {
        right: 0px;
      }
      .swiper-button-prev:hover,.swiper-button-next:hover {
        background: rgba(209, 209, 209, 0.5);
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }
}
.banner-box {
  height: 370px;
  opacity: 1;
  padding: 172px 120px 0 120px;
  box-sizing: border-box;
  background: url(/images/productImages/honor.png) right 120px bottom 20px / 320px auto no-repeat,linear-gradient(90deg, rgba(137, 247, 254, 1) 0%, rgba(84, 156, 252, 1) 100%);;
}
.honor-box {
  max-width: 990px;
  padding-bottom: 82px;
  margin: 0 auto;
  & .honor-card {
    width: 300px;
    margin: 0 15px 48px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    background-clip: content-box;
    background-color: rgba(255, 255, 255, 1);
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    &.large {
      padding: 32px;
    }
    &.small {
      padding: 19px 15px;
    }
  }
}
@media screen and (max-width: 768px) {
  .banner-box {
    height: 260px;
    background-position: center top 100px, left top;
    background-size: auto 80px, auto 100%;
    & .banner-content {
      top: 260px;
      width: 100%;
    }
  }
  .honor-box {
    justify-content: center;
    padding: 0 30px 20px;
    & .honor-card {
      width: 300px;
      margin: 0 15px 20px;
    }
  }
}
</style>

出现空白页的bug

使用了swiper的coverflowEffect效果，设置了同时显示3个，同时开启了loop模式。

当切换到倒数第二张时没有新的slider生成，导致最后一张的右边是空白的，只有切换到最后一张时才会再在后面复制新的slider，怎么让它在显示倒数第二张时就生成新的slider？

image.png

最后发现slidesPerView设置为auto，就正常了

然后调整coverflowEffect里的stretch和depth来弄就没问题了

VueSwiper.vue

<template>
  <div v-if="initStatus" v-swiper:mySwiper="swiperOption" class="swiper mySwiper swiperBox">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in list.value" :key="index">
        <div class="pr">
          <div class="swiper-slide-imgbox uf uf-ac uf-jc">
            <img :src="item.imageUrl" />
          </div>
          <div class="font12 c8 txt-box">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>
<script>
export default {
  props: {
    list: {//banner数组
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      initStatus: false,//初始化状态
      swiperOption: {},//swiper参数
    }
  },
  mounted() {
    let self = this;
    this.$nextTick(() => {
      this.swiperOption = {
        loop: true,
        loopAdditionalSlides: 3,
        coverflowEffect: {
          rotate: 50, //侧转角度（正值凹陷）
          stretch: -110,//每个slide之间拉伸值（正值紧贴）
          depth: 100,  //值越大为远景（可负值）
          modifier: 1, //depth和rotate和stretch的倍率
          shadows: false
       },
        centeredSlides: true,
        initialSlide: 1,
        slidesPerView: 'auto',//一页显示几个
        spaceBetween: 10,//间隔
        updateOnWindowResize: true,
        watchSlidesProgress: true,//
        noSwiping: true,//
        effect: 'coverflow', //设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
        freeMode: 1,
        autoplay: {//自动轮播//
          delay: 3000, //
          disableOnInteraction: false,//操作swiper后 自动轮播不会停止//
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      }
      this.initStatus = true //渲染swiper
    })
  },
}
</script>
<style lang="scss" scoped>
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-sizing: border-box;
}
.swiper-wraper {
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  box-sizing: content-box;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}
.swiper-slide-imgbox{
  width: 315px;
  height: 302px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  padding: 20px;
  box-sizing: border-box;
}
.pr{
  position: relative;
}
.txt-box{
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
</style>
浮游本尊
关注
  • 18
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp 实现swiper-3d效果轮播(中间大图两边小图)
前端程序员、项目经理、人工智能博主
10-31 6995
gif：效果图如下 代码如下： HTML部分 <view class="swiper-3d"> <swiper :current="swiper.current" class="s-container" @change="swiperChange" :circular="swiper.circular" :indicator-dots="swiper.indicatorDots" :interval="swiper.interval" :dur
探索前沿技术：WeApp Swiper 3D - 为微信小程序打造立体旋转效果
gitblog_00063的博客
04-07 430
探索前沿技术：WeApp Swiper 3D - 为微信小程序打造立体旋转效果 项目地址:https://gitcode.com/byk04712/weapp-swiper3D 在微信小程序开发中，给用户带来富有视觉冲击力的交互体验是关键之一。今天，我们向您推荐一款强大的开源项目——WeApp Swiper 3D。这是一个专门用于创建3D轮播图效果的小程序组件，它能够帮助开发者轻松实现炫酷的3D...
swiper3D轮播图专属案例
weixin_48173033的博客
06-05 764
先安转swiper的各种依赖包：npm install vue-awesome-swiper(如果是vue2请安装4.1.*的版本)，slidesPerView: 'auto', // 3 这个是三个轮播切换没三组切换一次。//loop: true, // 循环参数。// loop: true, // 循环参数。
vue swiper 同屏展示 3D效果
会飞的程序猿
08-29 705
基于swiper 4.0以上版本，同屏swiper展示
在vue2项目中使用swiper和vue-awesome-swiper的详细步骤
最新发布
zzz1780340的博客
05-24 3044
swiper在项目中使用（详细不能再详细版）！！！！
关于使用 z-swiper 3d流的的方法
bpluoxong的博客
05-26 725
这个组件的功能是在uniapp上实现3d效果轮播图，效果可以，但是功能上差一些，需要我们自己来弥补。首先是滑动的时候会出现因为惯性效果页面上显示的已经到第4个但是下标还在第三个的情况。，是在uniapp中使用，本文章是为了解决一些使用这个组件时的需求来创作的。中间是图片结构，我们在切换地时候会去实现botimg2的选中状态切换。移动开始的方法里我们记录下开始时的下标，在移动的时候进行更新。未来解决问题我们在互动开始和动画结束的时间分别做处理。这里的options是。
使用swiper5进行3d轮播图，轮播切换.
陈先生的博客
09-15 2687
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper的3D切换</title> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/certify.css">
swiper 3d 结合 loop 向左移动缺少一个内容
PBitW的博客
03-30 367
swiper 3d 结合 loop 向左移动缺少一个内容
运用swiper框架快速实现网页当中的轮播效果
qq_60483918的博客
06-05 1531
本文介绍了使用swiper框架快速实现网页的图片轮播效果！简要介绍了几种效果。
Swiper-3D-Flow:Swiper 的 3D Flow 插件
06-25
注意力！ 此插件不再维护，因为此功能已在 Swiper 3 核心中。 Swiper-3D-Flow Swiper 的 3D Flow 插件 3D Flow 是 iDangero.us Swiper 的超小（1Kb 缩小和 gzipped）免费插件，可将您出色的 swiper 滑块（或应用程序）变成具有动态阴影的惊人逼真 3D 画廊。 它的灵感来自 iOS App Store 主页 3D 滑块。 它适用于所有支持 CSS3 3D 转换的浏览器：WebKit 浏览器（Chrome、Safari、iOS Safari、原生 Android 和黑莓浏览器等）、FireFox 12+ 和 Internet Explorer 10（包括 Windows Phone 8）。 在不支持 CSS3 3D 转换的浏览器中，它可以正常工作并且看起来像一个普通的 Swiper。 演示和使用 笔记 提供 UM
Swiper 3D flow使用方法
cc蒲公英的博客
08-05 8092
(1). 如需使用Swiper的3d切换首先加载3D flow插件(js和css)。 head> link rel="stylesheet" href="css/idangerous.swiper.css"> link rel="stylesheet" href="css/idangerous.swiper.3dflow.css"> script
环形3D立体旋转特效
12-24
jquery 框架实现的环形 3D立体旋转 特效。
swiper实现异形轮播效果
12-13
在本文中，我们将探讨如何使用Swiper插件来创建一种特殊的轮播效果，即所谓的“异形轮播”。Swiper 是一个流行的JavaScript库，专为触摸设备设计，用于创建高质量的滑动内容，如轮播图、幻灯片和产品滑块。它支持...
js使用swiper实现层叠轮播效果实例代码
12-09
swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了，下面就来开始本文的正文内容 实现过程： 一.移动端-需求swiper 4.0.3实现层叠轮播 ...
微信小程序实现的3d轮播图效果示例【基于swiper组件】
10-17
主要介绍了微信小程序实现的3d轮播图效果,结合实例形式分析了微信小程序基于swiper组件相关属性设置、事件响应操作技巧,需要的朋友可以参考下
VUE 3D轮播图封装实现方法
01-19
本文为大家分享了VUE 3D轮播图封装的具体代码，供大家参考，具体内容如下 一、体验地址 VUE 3D轮播图 二、实现功能点 （1）、无缝轮播 （2）、进入变大、离开缩小（类3d切换效果） 三、js代码 <!--轮播图...
vue3+swiper实现3D横向焦点图效果
2201_75763401的博客
04-24 812
1.安装swiper插件。2.引入swiper文件。
5分钟快速学会使用Swiper.js，实现轮播图各种效果！
QUX轻博客
09-21 4405
还在全网搜各种轮播图插件效果？还在下载轮播图之后跳转样式？都2020年了，不嫌麻烦吗？swiper插件的出现，几乎快覆盖了整个前端市场了吧！简单，快速，来跟着我学，...
swiper插件做3D轮播
weixin_48181168的博客
06-01 561
<link rel="stylesheet" href="../js/swiper.css"> <style> .swiper-container, .swiper-wrapper, img{ width: 320px; height: 200px; } </style> </head> <body> <.
vue使用swiper实现轮播图
09-17
使用vue实现轮播图可以通过引入vue-awesome-swiper插件来实现。首先，使用npm安装vue-awesome-swiper插件，运行命令npm install vue-awesome-swiper --save。然后，在main.js中引入插件，使用import VueAwesomeSwiper from 'vue-awesome-swiper'。接下来，引入swiper的js文件和css文件，使用import Swiper from 'swiper'和import 'swiper/css/swiper.css'。最后，通过异步请求从服务器获取轮播图数据，并使用v-for渲染在轮播图页面结构中。请注意，需要等轮播图页面结构渲染数据完成后，再实例化swiper实例，才能使轮播图的动态效果生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值