实现swiper 3d 轮播效果

这篇具有很好参考价值的文章主要介绍了实现swiper 3d 轮播效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先上个效果图,代码可以直接拿~
swiper 3d,前端

安装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?

swiper 3d,前端

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

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

VueSwiper.vue文章来源地址https://www.toymoban.com/news/detail-854468.html

<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>

到了这里,关于实现swiper 3d 轮播效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决微信小程序swiper轮播图撑不满有留白 实现swiper轮播图撑满父容器

    问题 :如下图,swiper轮播图两侧会有留白,没有撑满swiper 失败的尝试 : 1.调整图片尺寸 2.设属性设置image的mode为scaleToFill 3.设置item的属性 都没能实现将图片填充满轮播图,图片会有右侧和底部两块留白 通过调试器查看到image区域很小,怀疑是image本身属性的问题 随后尝试在

    2024年04月25日
    浏览(59)
  • Swiper轮播图后端接口实现

    2024年01月25日
    浏览(50)
  • 使用swiper实现图片轮播功能

    swiper中文官网地址:在这里 官网介绍:Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 按照使用方法下载指定版本的swiper文件; 需要用到的文件有swiper-bundle.js和swiper-bundle.css文件,还需要引入map文件,不然会有警告提示; 准备工作: 先将图片放到

    2024年02月14日
    浏览(37)
  • 微信小程序swiper实现层叠轮播图

    在微信小程序中,需要实现展示5个,横向层叠的轮播图效果,轮播图由中间到2侧的依次缩小.如下图 使用原生小程序进行开发,没有使用Skyline模式,所以layout-type配置项也无效。所以基于swiper组件进行调整。 主要思路就是设置不同的样式,根据当前激活的项,来动态切换样式。

    2024年01月24日
    浏览(60)
  • JS常用插件 Swiper插件 实现轮播图

    Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架 中文官网地址: https://www.swiper.com.cn/ 点击查看 Swiper演示 ,里面的功能和样式十分丰富,根据自己的需求选择 中文教程 中详细介绍了如何使用Swiper API文档 中介绍了各个模块以及参数的详细信息,遇到不明白的参数可以

    2024年02月01日
    浏览(65)
  • Vue2+swiper基础实现轮播图

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 swiper的基础使用 提示:以下是本篇文章正文内容,下面案例可供参考 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发         注意:我们用的是vue2所以推荐大家下载swiper5版本 示例: 查看安装是否完成

    2024年01月16日
    浏览(78)
  • 不到200行用Vue实现类似Swiper.js的轮播组件

    大家在开发过程中,或多或少都会用到轮播图之类的组件,PC和Mobile上使用 Swiper.js ,小程序上使用swiper组件等。 本文将详细讲解如何用 Vue 一步步实现的类似 Swiper.js 的功能,无任何第三方依赖,干货满满。 在线预览:https://zyronon.github.io/douyin/ 项目源代码:https://github.com/

    2024年04月23日
    浏览(34)
  • 微信小程序首页、界面布局、3D轮播图效果(示例二)

    使用swiper实现3D轮播图效果,自定义顶部状态栏,具体代码: 1、js代码 2、wxml代码 3、wxss代码 4、json代码 如需要下载完整版,包含监听事件、图片文件等,请前往下方链接,下载完整版,下载后直接使用微信开发者工具打开即可,下载链接为: 小程序完整版界面(示例二)

    2024年02月10日
    浏览(58)
  • 创建一个具有背景轮播和3D卡片翻转效果的个人名片网页

    目录 项目展示 图片展示 前言 项目目标 项目目标 步骤 3:CSS 样式 步骤 4:JavaScript 动画 项目源码 知识点介绍 (大佬请绕道) HTML 结构的构建 2. CSS 样式的设计 3. JavaScript 动画的实现 4. 背景图轮播的逻辑 5. CSS 3D变换的使用 结语 项目展示 点击下面链接(第一次打开可能会有

    2024年02月08日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包