vue3使用swiper实现首页图片轮播并自定义左右箭头样式及分页器样式

鱼是一只鱼啊

已于 2024-08-28 10:44:10 修改

阅读量783

点赞数 1

分类专栏： Vue 文章标签： vue3 swiper

于 2024-08-28 10:42:12 首次发布

本文链接：https://blog.csdn.net/honeycandys/article/details/141634605

版权

Vue 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

安装vue-awesome-swiper

npm intall vue-awesome-swiper --save

安装swiper

npm install swiper --save

关键部分代码

<template>
  <div>
    <swiper :modules="modules" navigation :pagination="{ clickable: true }" :autoplay="{ delay: 3000, disableOnInteraction: false }">
      <swiper-slide v-for="(image, index) in banners" v-bind:key="index">
        <img :src="image" class="swiper-image" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Pagination, Navigation,Autoplay  } from "Swiper";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css";
import "swiper/css/pagination";
import { ref, reactive } from "vue";

import banner1 from "../assets/images/home/banner1.png";
import banner2 from "../assets/images/home/banner2.png";
import banner3 from "../assets/images/home/banner3.png";
import banner4 from "../assets/images/home/banner4.png";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    let banners = reactive([banner1, banner2, banner3, banner4]);
    return {
      banners,
      modules: [Navigation, Pagination,Autoplay],
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: none;
}
::v-deep  .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
  content: none;
}
::v-deep .swiper-button-next {
  width: 62px;
  height: 62px;
  background-image: url(../assets/images/home/btn-next.png);
  background-size: 62px auto;
  margin-right: 30px;
}
::v-deep .swiper-button-prev{
  width: 62px;
  height: 62px;
  background-image: url(../assets/images/home/btn-pre.png);
  background-size: 62px auto;
  margin-left: 30px;
}
::v-deep .swiper-pagination-bullet{
  width: var(--swiper-pagination-bullet-width);
  height: var(--swiper-pagination-bullet-height);
  border-radius: 10px;
  background: #d1d1d1;
  opacity:1;
}
::v-deep .swiper-pagination-bullet-active{
  width: var(--swiper-pagination-bullet-width);
  height: var(--swiper-pagination-bullet-height);
  border-radius: 10px;
  background:#20cf89 ;
}
::v-deep .swiper-pagination{
  margin-bottom: 47px;
}
.swiper-image {
  width: 100%;
  height: 695px;
  object-fit: cover; /* 保持宽高比，不裁剪图片 */
  }
}
</style>

效果

在这里插入图片描述

vue版本

"dependencies": {
    "swiper": "^8.4.7",
    "vue": "^3.4.37",
    "vue-awesome-swiper": "^5.0.1",
    "vue-router": "^4.4.3",
    "vuex": "^4.1.0"
  },