VUE3中使用Swiper7，自定义左右箭头的图案样式、大小、颜色、箭头与轮播图分离

g1nko
3,608 阅读1分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、核心思路和方法

  • 需要在<style>中单独写入控制左右箭头的自定义样式，实现对swiper默认样式的替换
  • 使用伪元素选择器::after和iconfont字体，替换默认的箭头

前言

官方文档：swiperjs.com/vue
虽然Swiper的引入和基本配置方法不是本文探讨的重点，但对于第一次接触Swiper、Swiper7的读者，在参考上述官方文档的同时，可能还会遇到以下这些“ 坑 ”。如果你对基本使用部分已经熟练，可以跳过前言部分中的以下内容。

css引入相关

image.png
该截图源自上述官方文档Usage篇
如果你直接复制粘贴，会发现Swiper样式并没有正常工作。官方文档中的该代码仅示意，需要从swiper文件夹中引入css文件，具体引入哪个css文件是需要开发者自己决定。官方文档中的Styles篇有对这部分的介绍。
关于基本使用还可以参考这篇文档。

注：后续内容是基于你已经配置了基本的swiper，后续内容也不会再赘述基本配置项相关的内容。
笔者自己的项目中引入的是 import 'swiper/swiper-bundle.min.css'，后续文章的讨论也是建立在引入bundle css文件基础上。如果你自己的项目中，是分别引入swiper各组件的css样式，后续内容请谨慎参考。

二、template部分配置

<template>
  <div class="swiper-container">
    <swiper
      :loop="true"
      :modules="modules"
      :slides-per-view="1"
      :space-between="0"
      :grid="{ fill: 'row', rows: 1 }"
      :slidesPerView="6"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="carousel in imgList" :key="carousel.id">
        <img :src="carousel.imgUrl" />
      </swiper-slide>
    </swiper>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

注意点：

  • 两个箭头各自对应的<div>写在<swiper>外面或者里面都可以。
  • <swiper>标签中需要配置:navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }"

三、style样式配置

如果你已经配置好了template，就可以在<style>中配置箭头的样式.swiper-button-prev,.swiper-button-next相关属性。

箭头图案

方法：使用::after伪元素选择器，配合iconfont字体的unicode

<style lang="less" scoped>
  .swiper-button-prev:：after,
  .swiper-button-next:：after {
    //指定字体采用iconfont
    font-family: iconfont;
    content: '\eb0a';
  }
</style>

说明：
1.为什么采用::after伪类选择器替换默认箭头？
swiper7默认的箭头样式配置就是通过::after伪类选择器实现。 《学！》
image.png
2.如何使用iconfont替换默认箭头图案?

  • 首先需要在vue-cli项目中的index.html文件中引入已经下载了的iconfont.css
  • 下图中的&#xeb09=>\eb09=>content: '\eb0a（为什么？ ） image.png

更改箭头颜色、大小

因为已经采用了iconfont字体作为箭头图案，所以用更改一般字体的方式去更改箭头的各种属性，例如下

<style lang="less" scoped>
  //定义箭头默认颜色
  .swiper-button-prev,
  .swiper-button-next {
    color: grey;
    &:hover {
      color: skyblue;
    }
  }
  .swiper-button-prev {
    left: 10px;
    //使用iconfont字体对应的unicode作为箭头图案
    &::after {
      content: '\eb0a';
    }
  }
  .swiper-button-next {
    right: 10px;
    &::after {
      content: '\eb09';
    }
  }
  //定义箭头样式
  .swiper-button-prev:：after,
  .swiper-button-next:：after {
    //指定字体采用iconfont
    font-family: iconfont;
    font-weight: 800;
    font-size: 30px;
  }
</style>

四、箭头和轮播图“分离”

默认的swiper中，箭头和轮播图重叠，如何实现如下图中的箭头和轮播图“分离”的效果？

image.png

  • template中，两个箭头各自对应的<div>需要写在<swiper>外面，详下代码块
  • 用一个父级盒子包裹<swiper>和两个箭头各自对应的<div>，详下代码块
  • 箭头部分样式设置绝对定位，父级盒子设置相对定位，相应css略 template配置如下
<template>
  <div class="swiper-container">
    <swiper
      ...省略其余配置
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      ...省略其余配置
    >
      <swiper-slide>
        <img />
      </swiper-slide>
    </swiper>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>
avatar
文章
阅读
粉丝