【vue】在vue中使用swiper，可以使用

最新推荐文章于 2024-04-10 16:37:19 发布

歌声缓缓

最新推荐文章于 2024-04-10 16:37:19 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue.js npm webstorm

本文链接：https://blog.csdn.net/weixin_43444977/article/details/123233770

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

打开swiper 官网：
https://www.swiper.com.cn/
在这里插入图片描述

下载地址
https://www.swiper.com.cn/demo/index.html
一、先将 js和css 放到vue工程中
在这里插入图片描述
二、新建.vue文件，将需要用的swiper demo粘贴到文件中

<template>
    <div class="swiper mySwiper">
        <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>
        <!--<div class="swiper-pagination"></div>-->
    </div>
</template>

<script>
   // import Swiper from '../utils/swiper-bundle.min.js'
    var Swiper = require('../utils/swiper-bundle.min')
    export default {
        name: "swiperDemo",
        mounted() {
            console.log(this)
            var swiper = new Swiper(".mySwiper", {
                loop:true,
                effect: "cards",
                grabCursor: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });
        }
    }
</script>

<style scoped>
@import "@/utils/swiper-bundle.min.css";

.swiper {
    width: 240px;
    height: 320px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
}

.swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
}

.swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
}

.swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
}

.swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
}

.swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
}

.swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
}

.swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
}

.swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
}

.swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
}
</style>