Swiper轮播图

最新推荐文章于 2023-12-23 14:58:01 发布

mygoes

最新推荐文章于 2023-12-23 14:58:01 发布

阅读量446

点赞数

文章标签： Swiper vue 轮播自动轮播拖拽

本文链接：https://blog.csdn.net/mygoes/article/details/109448342

版权

Swiper轮播图

官方链接：
1、Swiper 官网
2、在 vue 中使用 Swiper
3、 Swiper 的 CDN
分割图

运行 Swiper 的 Demo 步骤：

进入Swiper 官网 → 首页 → 查看Swiper演示→ 在新窗口打开 → （右击鼠标）查看网页源代码
步骤图解1

步骤图解2
步骤图解3
例🌰子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <!-- Demo styles -->
    <style>
        html,body {position: relative; height: 100%;}
        body {background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0;}
        /* 给Swiper定义一个大小 */
        .swiper-container {width: 100%; height: 100%;}
        .swiper-slide {text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
    </style>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 4,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            // 循环
            loop: true,
            speed: 1000,
            // 自动轮播
            autoplay: {
                delay: 1000,
                disableOnInteraction: false,
            },
        });
    </script>
</body>

</html>

分割图

在 vue 中运行 Swiper 的坑：

坑：截止 2020/11/02（Swiper 版本6.3.5 ；vue-awesome-swiper 版本4.1.1）按照官方文档中的 在 vue 中使用 Swiper 教程走，自动轮播属性不生效。

跳坑：在 main.js 文件中插入以下代码即可：

import Swiper6, { Autoplay, Pagination } from 'swiper'
Swiper6.use([Autoplay, Pagination]);

分割图

在 vue 中运行 Swiper 的步骤：

1、新建一个 swiper-bundle.css 文件，待会儿要在项目中引入：swiper-bundle.css 文件内容

2、在 main.js 文件中：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import './style/swiper-bundle.css' // 根据自己的路径修改
import Swiper6, { Autoplay, Pagination } from 'swiper'

Swiper6.use([Autoplay, Pagination]);

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3、在要用 Swiper 轮播的文件中：

<template>
  <div>
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
// 导入swiper轮播图
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "../style/swiper-bundle.css";

export default {
  name: "swiper-example-multiple-slides-per-biew",
  title: "Multiple slides per view",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
         // 循环
        loop: true,
        speed: 1000,
        // 自动轮播
        autoplay: {
          delay: 1000,
          disableOnInteraction: false,
        },
      },
    };
  },
};
</script>

<style scoped>
        html,body {position: relative; height: 100%;}
        body {background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0;}
        /* 给Swiper定义一个大小 */
        .swiper-container {width: 100%; height: 100%;}
        .swiper-slide {text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
</style>

github 拉取完整 Demo 代码

完结撒花

mygoes

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Swiper轮播图

Swiper轮播图运行 Swiper 的 Demo 步骤：在 vue 中运行 Swiper 的坑：在 vue 中运行 Swiper 的步骤：官方链接：1、Swiper 官网2、在 vue 中使用 Swiper3、 Swiper 的 CDN运行 Swiper 的 Demo 步骤：进入Swiper 官网 → 首页 → 查看Swiper演示→ 在新窗口打开 → （右击鼠标）查看网页源代码例????子：<!DOCTYPE html><html lang="en">
复制链接

扫一扫