vue 水平卡片式轮播

基于 vue3 + ts 开发的

---

项目需要完成如上图的轮播，这是水平卡片式轮播。我的项目是基于 vue3+ts 开发的，我使用 swiper 来完成该轮播开发。具体代码如下文

---

首先安装 swiper

npm install swiper --save
// or
yarn add swiper

html 代码

<template>
  <div>
    <div class="examples">
      <div class="bannerBox">
        <div class="swiper-container swiper3">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in banner"
              :key="index"
            >
              <img :src="item.picture_path" alt="" />
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <div class="swiper-button-prev swiper-button-white"></div>
          <div class="swiper-button-next swiper-button-white"></div>
        </div>
      </div>
    </div>
  </div>
</template>

javascript 代码

<script>
// 有部分没用到你们可以不引用
import Swiper, { Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation } from 'swiper';
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);
import 'swiper/swiper.min.css';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';

export default {
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  data() {
    return {
      bannerIndex: 0,
      banner: [
        {
          picture_path: require('../../assets/home/home_bg.png')
        },
        {
          picture_path: require('../../assets/home/lunbo.png')
        },
        {
          picture_path: require('../../assets/home/home_bg2.png')
        }
      ]
    };
  },
  mounted() {
    let that = this;
    let mySwiper = new Swiper('.swiper3', {
      direction: 'horizontal', //滑动方向，可设置水平(horizontal)或垂直(vertical)。
      loop: true, // 设置为true 则开启loop模式
      autoplay: true, // 自动切换时间
      speed: 500, // 切换速度
      slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。类型：number or auto
      centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
      spaceBetween: 10, // 在slide之间设置距离（单位px）。
      loopAdditionaSlider: 0, // loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction'
      },
    });
  },
};
</script>

css 代码

<style lang="scss" scoped>
.examples{
  padding: 100px;
}
.bannerTxt{
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #666666;
  font-size: 15px;
}
.bannerIndex{
  line-height: 40px;
  text-align: center;
  color: #666666;
  font-size: 15px;
  text-align: center;
  span{
    color: #b5654d;
  }
}
.bannerBox{
  position: relative;
  height: 490px;
}
.swiper3 {
  width: 100%;
  height: 100%;
}
.swiper3 .swiper-wrapper .swiper-slide {
  width: 940px !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-right: 20px !important;
}
.swiper3 .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 490px;
  border-radius: 5px;
}
.swiper3 .swiper-wrapper .swiper-slide-prev,.swiper3 .swiper-wrapper .swiper-slide-next{
  height: 490px !important;
  border-radius: 5px;
  background: #000;
  // margin-top: 20px;
}
.swiper3 .swiper-wrapper .swiper-slide-prev img,.swiper3 .swiper-wrapper .swiper-slide-next img{
  opacity:0.6; filter: alpha(opacity=60);
  width: 100%;
  height: 100%;
}
.swiper3 .swiper-pagination {
  color: #fff;
}
</style>