Swiper轮播图

QB哥

已于 2024-05-13 20:54:14 修改

阅读量386

点赞数 3

文章标签： Swiper vue.js 轮播图

于 2024-05-13 20:53:38 首次发布

本文链接：https://blog.csdn.net/baozi7263/article/details/138819117

版权

Swiper轮播图

轮播图是各种界面上最常见的，制作轮播图有很多方式，这里介绍使用Swiper插件快速使用。

1、普通PC端页面

1.1、下载Swiper资源

首先，访问Swiper的官方网站Swiper官网，下载最新版本的Swiper。或者，你也可以直接从CDN服务中引用，比如BootCDN或UNPKG。

1.2、引入Swiper的CSS和JS文件

将下载的Swiper的CSS和JS文件引入到你的HTML文件中。假设你已经将这两个文件放在了你的项目文件夹里，可以这样做：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper Demo</title>
    <!-- 引入Swiper的CSS -->
    <link rel="stylesheet" href="下载的swiper路径/swiper-bundle.min.css">
</head>
<body>
    <!-- Swiper容器 -->
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <!-- 更多幻灯片... -->
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <!-- 引入Swiper的JS -->
    <script src="下载的swiper路径/swiper-bundle.min.js"></script>

    <!-- 初始化Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            // 参数设置
            loop: true, // 循环模式选项
            autoplay: { delay: 3000 }, // 自动播放设置
            pagination: {
                el: '.swiper-pagination',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</body>
</html>

2、基于Vue3的移动端

2.1、导入swiper依赖

首先，确保你已经安装了 Swiper。如果你还没有安装，可以通过 npm 来安装 Swiper：

npm install swiper

2.2、引入 Swiper 组件和样式

在你的 Vue 3 组件中，你需要引入 Swiper 的组件和样式。

// 在你的 .vue 文件的<script setup>或<script>标签内
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css'; // 引入基本的 Swiper CSS
import 'swiper/css/navigation'; // 如果需要使用导航等额外功能，也要引入相应的 CSS
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

// 确保在你的组件中注册 Swiper 和 SwiperSlide
// 在<script setup>中自动注册，如果是<script>则需要在components选项中手动注册

2.2、使用 Swiper 组件和样式

接下来，在模板中使用 Swiper 和 SwiperSlide 组件，并根据需要配置 Swiper 的属性和方法：

<template>
  <swiper
    :modules="modules"
    :space-between="50"
    :slides-per-view="1"
    :loop="true"
    :pagination="{ clickable: true }"
    :navigation="true"
    :scrollbar="{ draggable: true }"
    :autoplay="{
    delay: 2500,
    disableOnInteraction: false,
    }"
    >
    <swiper-slide v-for="(item, index) in slides" :key="index">
      <!-- 在这里放置你的幻灯片内容 -->
      Slide {{ index + 1 }}
    </swiper-slide>

    <!-- 如果使用了导航，可以在这里定义自定义按钮，但通常不需要 -->
    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div> -->
  </swiper>
</template>

<script setup>
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Navigation, Pagination, Scrollbar, Autoplay } from 'swiper/modules';

  // 引入并注册模块
  const modules = [Navigation, Pagination, Scrollbar, Autoplay];

  // 定义你的幻灯片数据
  const slides = ['Slide 1 Content', 'Slide 2 Content', 'Slide 3 Content'];
</script>