vue3中使用swiper基础步骤

最新推荐文章于 2024-05-21 23:21:19 发布

.云翳

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量396

点赞数 1

文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_48783694/article/details/136867774

版权

一、准备

vscode、swiper：6.8.1、

swiper官网pc端

二、创建项目

1.按照swiper依赖

npm insatll swiper

2.使用swiper

// 导入 swiper 组件
import { Swiper, SwiperSlide } from 'swiper/vue'
// 导入 css 样式
import 'swiper/swiper-bundle.min.css'
// 导入 模块 关于各个模块解释在最下面
import SwiperCore, {
  EffectCoverflow,
  A11y,
  Autoplay,
  Pagination,
  Navigation,
} from 'swiper'

// 注册使用
SwiperCore.use([Navigation, A11y, Pagination, Autoplay])

<Swiper
      :pagination="{
        clickable: true,
      }"
      :navigation="true"
    >
      <SwiperSlide v-for="(item, index) in List" :key="item.id">
        <button>{{ realIndex }} {{ index }} {{ index === realIndex }}</button>
        <div class="item">
          <div class="img">
            <!-- <img src="../public/bg.jpg" :class="{'img-opacity':index===realIndex}"/> -->
            <img
              src="../public/bg.jpg"
              :style="index === realIndex && 'opacity: 1;'"
            />
          </div>
        </div>
      </SwiperSlide>
    </Swiper>