封装一个中间大两头小的轮播图（vue-awesome-swiper、vue2）

已于 2023-11-14 14:56:02 修改
阅读量768 收藏 2
点赞数
文章标签： vue.js swiper
于 2023-11-09 14:08:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43909743/article/details/134309477
版权

需求

先看效果图
vue-awesome-swiper

对vue来说，element-UI是有相应的轮播组件（走马灯）的，但相对简单的
在这里插入图片描述
如上面的两头大中间小轮播，element上文档这款很类似，但不适用，因为卡片之间底层移动和间距是依赖js实现的，当页面存在间距而且不同页面需要适配时，我从控制css样式层面很难实现。

所以有了这个组件的封装

提示：
本组件

1、封装中只使用了一些网络资源图片

2、提供了初始化默认是数据

3、使用插槽默认一些代码布局

属于拿来代码导入即可直接看到效果的

实现

vue-awesome-swiper安装

对vue-awesome-swiper来说，版本不同会出现很多问题（比如导入的css文件位置）
swiper和vue-awesome-swiper的版本一定要相对应

版本安装

npm i swiper@4.5.1 vue-awesome-swiper@3.1.3 --save

"swiper": "^4.5.1",
"vue-awesome-swiper": "^3.1.3",

代码

提供了网络图片的默认数据sceneCardList
提供了slot插槽供提供布局代码

组件封装代码

<template>
  <div class="content">
    <div class="startPage">
      <!-- 内容 -->
      <div class="content">
        <div class="cards">
          <div class="cardSwiper">
            <!-- 左箭头 -->
            <div
              :class="[
                'commonArrow',
                'arrowLeft',
              ]"
              @click="toLastSlide"
            />
            <!-- 右箭头 -->
            <div
              :class="[
                'commonArrow',
                'arrowRight',
              ]"
              @click="toNextSlide"
            />
            <!-- 下方卡片轮播 -->
            <swiper
              ref="mySwiper"
              class="cardItem"
              :options="swiperOption"
              @slide-change-transition-end="handleBottomCardSlide"
            >
              <swiper-slide
                v-for="(item, index) in sceneCardList"
                :key="index"
                class="cardItem"
              >
                <slot :item="item">
                  <div class="CasesCard-li">
                    <img :src="item.url" alt="">
                    <div class="info">
                      <img :src="item.img" alt="">
                      <div class="CasesCard-li-name">{{ item.text }}</div>
                      <div class="CasesCard-li-text">
                        --{{ item.name }}
                      </div>
                    </div>
                  </div>
                </slot>
              </swiper-slide>
              <div slot="pagination" class="swiper-pagination" />
            </swiper>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

const sceneCardList = [
  {
    name: '联想集团',
    text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
    img: 'https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/slice/logo.23996906.svg',
    url: 'https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/portal-set/src/projects/Cooperation/components/Ecology/css/img/bg-main.png'
  },
  {
    name: '联想集团',
    text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
    go: '前往云市场',
    img: 'https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/slice/logo.23996906.svg',
    url: 'https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/portal-set/src/projects/Cooperation/components/Ecology/css/img/bg-main.png'
  },
  {
    name: '联想集团',
    text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
    img: 'https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/slice/logo.23996906.svg',
    url: 'https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/portal-set/src/projects/Cooperation/components/Ecology/css/img/bg-main.png'
  },
  {
    name: '联想集团',
    text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
    go: '前往云市场',
    img: 'https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/slice/logo.23996906.svg',
    url: 'https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/portal-set/src/projects/Cooperation/components/Ecology/css/img/bg-main.png'
  },
  {
    name: '联想集团',
    text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
    go: '前往云市场',
    img: 'https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/slice/logo.23996906.svg',
    url: 'https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/portal-set/src/projects/Cooperation/components/Ecology/css/img/bg-main.png'
  },
  {
    name: '联想集团',
    text: '在国能云IoT物联网使能服务的基础上，帮助企业了解完整的设备全生命周期管理能力数据，提供设备物模型，简化物联网应用开发难度、缩短开发时间，降低物联网应用开…',
    go: '前往官方文档',
    img: 'https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/slice/logo.23996906.svg',
    url: 'https://cloudcache.tencent-cloud.com/open_proj/proj_qcloud_v2/portal-set/src/projects/Cooperation/components/Ecology/css/img/bg-main.png'
  }
]
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    swiper,
    swiperSlide
  },
  props: {
    swiperlist: {
      type: Array,
      default: function() {
        return sceneCardList
      }
    },
    swiperOption: {
      type: Array,
      default: function() {
        return {
          slidesPerView: 3,
          // 设定为true时，active slide会居中，而不是默认状态下的居左(false)
          centeredSlides: false,
          // 滑动速度
          // speed: 1500,
          // 在slide之间设置距离（单位px）
          spaceBetween: 16,
          // 循环播放
          loop: true,
          // 自动播放
          autoplay: {
          // 隔×秒自动滑动一次
            delay: 2000,
            // 设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。默认为true
            disableOnInteraction: false
          },
          observer: true, // 修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, // 修改swiper的父元素时，自动初始化swiper
          // 标记页数
          pagination: {
            el: '.swiper-pagination',
            clickable: true // 允许分页点击跳转
          },
          on: {
          }
        }
      }
    }
  },
  // 数据
  data() {
    return {
      sceneCardList: sceneCardList
    }
  },
  // 计算属性-监听属性 类似于data概念
  computed: {
    // 轮播
    SwiperEle() {
      return this.$refs.mySwiper.swiper
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 能够使用swiper这个对象去使用swiper官网中的那些方法
    console.log('this is current swiper instance object', this.SwiperEle, this.list)
  },
  // 方法集合
  methods: {
    // 卡片滑动结束回调函数
    handleBottomCardSlide() {
      // const { activeIndex } = this.SwiperEle
      // console.log('切换结束后，下方卡片当前所处第几个slide', this.SwiperEle)
      // // 赋值-下方卡片当前所在slide的索引值
      // this.currentBottomSwiperSlide = activeIndex
    },
    // 点击「左箭头」
    toLastSlide() {
      this.SwiperEle.slidePrev() // 上滑一页
    },
    // 点击「右箭头」
    toNextSlide() {
      console.log(1)
      this.SwiperEle.slideNext() // 下滑一页
    }
  }
}
</script>

<style scoped lang="less">
.content{
    min-height: 350px;
    min-width: 1300px;
}
.startPage {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    .content {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #000;
        left: 0;
        top: 0;
        box-sizing: border-box;
        .cards {
            width: 100%;
            height: 350px;
            margin: 0;
            box-sizing: border-box;
            // 下方卡片
            .cardSwiper {
                width: 100%;
                position: relative;
                // 箭头公共样式
                .commonArrow {
                    width: 48px;
                    height: 48px;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 2023;
                    cursor: pointer;
                }
                // 左箭头
                .arrowLeft {
                    left: 0;
                    background: url("~@/assets/images/cooperate/nozuo.png") no-repeat center/cover;
                    &:hover{
                        background: url("~@/assets/images/cooperate/zuo.png") no-repeat center/cover;
                    }
                }
                // 右箭头
                .arrowRight {
                    right: 0;
                    background: url("~@/assets/images/cooperate/noyou.png") no-repeat center/cover;
                    &:hover{
                        background: url("~@/assets/images/cooperate/you.png") no-repeat center/cover;
                    }
                }
                // 箭头不可点击时的样式
                .disabled {
                    opacity: 0.35;
                    pointer-events: none;
                }
                .cardItem {
                    width: 100%;
                    height: 350px;
                }
            }
        }
    }
    // 标记页数
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: 0px!important;
    }
    /deep/ .swiper-pagination-bullet-active {
        background: #f28047!important;
    }
    .swiper-wrapper{
      width: 100%;
      height: 350px;
    }
    .swiper-slide{
      transform: scale(0.8);
      transition: all 1.5s;
    }
    .swiper-slide-next{
      transform: scale(1);
      transition: all 1s;
    }
}

</style>
<style lang="scss" scoped>
.CasesCard-li{
  width: 457px;
  height: 350px;
  background: linear-gradient(180deg, #DFE4F0 0%, #FFFFFF 17%, #FFFFFF 100%);
  box-shadow: 4px 7px 18px 0px rgba(0,0,0,0.1);
  border-radius: 4px;
  margin-right: 32px;
  &-text{
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4E5969;
    text-shadow: 4px 8px 20px rgba(0,0,0,0.1);
    justify-content: end;
  }
  >img{
    width: 100%;
    height: 145px;
  }
  .info{
    height: 205px;
    background: linear-gradient(180deg, #DFE4F0 0%, #FFFFFF 17%, #FFFFFF 100%);
    box-shadow: 4px 7px 18px 0px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 0 32px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4E5969;
    line-height: 20px;
    text-shadow: 4px 8px 20px rgba(0,0,0,0.1);
    >img{
      height: 48px;
      box-shadow: 4px 8px 20px 0px rgba(0,0,0,0.1);
      border-radius: 4px;
      margin-bottom: 16px;
      margin-top: 8px;
    }
  }
}
</style>

使用

导入组件

import swiper from './swiper/index.vue'
components: {
    swiper
  },

直接使用

// 直接使用
<swiper />

直接使用修改option配置项

// 直接使用
<swiper :swiper-option="options"/>

传递数据

<swiper :swiperlist="sceneCardList"></swiper>
数据格式：{
     name: '联想集团',
     text: '在国能云IoT物联网使能服务的基础上',
     img: url,
     url: url  
}

传递数据并修改布局

<swiper v-slot="{item}" :swiperlist="sceneCardList">
   <div class="CasesCard-li">
     <img :src="item.url" alt="">
     <div class="info">
       <img :src="item.img" alt="">
       <div class="CasesCard-li-name">{{ item.text }}</div>
       <div class="CasesCard-li-text">
         --{{ item.name }}
       </div>
     </div>
   </div>
 </swiper>
Best_卡卡
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
中间图片放大，两边缩小，轮播效果
10-10
中间图片放大，两边缩小，轮播效果，自己写的，没有其它的JS
vue项目中使用swiper实现中间大，两边小的轮播图
Mark_yangyx的博客
11-22 5945
前言 项目中使用的vue，刚好有需求要实现轮播图，突出显示当前图片，两边展示其他图片；通过查各种资料，实现了，故在此记录下来 下面我们来看下实现步骤： 第一步：首先在项目index.html中引入swiper的css文件-swiper.min.css 第二部：写入dom结构 <div class="swiper-container"> <div class="swiper...
实现swiper 3d 轮播效果
浮游的博客
03-07 1012
先上个效果图，代码可以直接拿~
轮播图-实现中间大两边小的轮播图
06-29
类似collectionview的中间大两边小的效果的轮播图
swiper + vue 中间大两边小轮播图
weixin_45319500的博客
08-06 1728
展示效果 代码 字体16px 框架vuetify <template> <v-main> <div class="body_height ofs"> <div style="overflow: hidden;"> <div style="margin: 0 0.7rem 2rem;"> <!-- 轮播 --> <div style=""> <swiper :opt
使用swiper做的轮播图--可以中间大两边小
XKFC1的博客
08-29 5610
1.index.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
【每日积累】vue项目基于vue-awesome-swiper实现中间变大，两边缩小的滑动轮播功能
、蹄码笑春风的博客
05-06 1350
需求点如下：实现轮播组件，供pad和手机端使用，貌似ios有点小瑕疵！用elemenui的走马灯ios和android没有啥问题，目前提测没有发现！ 效果如下： 话不多说先把vue-awesome-swiper 下载 npm ivue-awesome-swiper yarn addvue-awesome-swiper 实现代码如下：可直接拿来即用，适合伸手党 <template> <!--swiper的bug,如果数据是从网络获取的, 那么自动轮播到最后...
vue实现swiper两端小中间大的效果 圆形
u013361179的博客
04-28 1705
vue实现swiper两端小中间大的效果 圆形
VUE3调用swiper slide实现简单的轮播图
qingyu3044的博客
04-12 446
loop autoplay两个属性的使用和之前版本不同。这里使用8.1.6版本。
Vue项目中swiper轮播active图片居中并放大
xiamoziqian的博客
12-13 5503
项目中用的是vue-awesome-swiper，vue-awesome-swiper是基于swiper 4.0的。所以参数参考swiper 4.0。 使用场景如下 要求左右切换时每次只移动一个图片，中间的图片始终放大，其他图片有不透明度。 解决思路 在官方文档中，active slide默认是居左的，通过把centeredSlides设置为true可以使其居中，但是左边会空着。解决思路就是，在...
vue轮播图插件vue-awesome-swiper
11-28
Vue-Awesome-Swiper 轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，SPA和SSR。 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var Vue = require('vue') var VueAwesomeSwiper = re
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件，这里我是用vie-cli创建的项目,在main.js： import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.use(VueAwesomeSwiper) //记得不要忘记这句 3.Home.vue下使用 <
vue使用swiper实现中间大两边小的轮播图效果
10-15
主要介绍了vue使用swiper实现中间大两边小的轮播图效果，本文分步骤通过实例代码讲解的非常详细,需要的朋友可以参考下
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
12-12
前段时间做Hybrid App，UI设计湿要求某一个页面的展示要实现滑动轮播效果，选中的内容卡片居中显示，上一个内容卡片和下一个内容以小一倍的大小显示在选中的卡片后头，而且要高斯模糊等等。。最骚的是滑动特效要是一...
vue轮播图插件vue-awesome-swiper的使用代码实例
08-30
本篇文章主要介绍了vue轮播图插件vue-awesome-swiper的使用代码实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 441
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 206
Vue项目中异步组件的引入使用
vue.js轮播组件vue-awesome-swiper@3.1.3 实现轮播图
07-27
引用\[1\]:根据提供的引用内容，版本3.1.3是vue-awesome-swiper的一个旧版本。引用\[2\]中提到了如何全局引入vue-awesome-swiper，并且需要引入swiper的CSS文件。引用\[3\]中展示了如何在Vue组件中使用vue-awesome-swiper来实现轮播图。根据您的需求，您想要在切换slide时更换app组件的背景。 为了实现这个需求，您可以在vue-awesome-swiper的slide切换事件中，通过修改app组件的背景样式来实现背景的更换。您可以在Vue组件中监听swiper的slideChange事件，并在事件回调函数中修改app组件的背景样式。 下面是一个示例代码，展示了如何实现这个需求： ```javascript <template> <div id="home-swiper"> <swiper ref="homeSwiper" :options="homeSwiperOptions" @slideChange="handleSlideChange"> <swiper-slide>...</swiper-slide> <swiper-slide>...</swiper-slide> </swiper> </div> </template> <script> import { swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css"; export default { components: { swiper, swiperSlide, }, methods: { handleSlideChange() { // 在这里修改app组件的背景样式 // 例如：this.$root.$el.style.background = "red"; }, }, }; </script> ``` 在handleSlideChange方法中，您可以根据需要修改app组件的背景样式。例如，您可以使用`this.$root.$el.style.background`来修改app组件的背景颜色。请根据您的具体需求进行相应的修改。 希望这个示例能够帮助您实现轮播图并更换app组件的背景。如果您有任何其他问题，请随时提问。 #### 引用[.reference_title] - *1* [【npm install vue-awesome-swiper@3.1.3 -S 】下载成功但是vue-awesome-swiper 用不了](https://blog.csdn.net/Sonnenlicht77/article/details/126951340)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [关于swiper的两种用法(swiper@4.0.7 vue-awesome-swiper@3.1.3）](https://blog.csdn.net/weixin_52259399/article/details/129066576)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue-awesome-swiper @3.1.3使用，记录一些bug及解决方法](https://blog.csdn.net/gegegegege12/article/details/121387965)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值