vue导入swiper_如何在vue项目中引入swiper

项目中有一个横向滚动的需求，用到了swiper，看看如何实现它。

1.首先在页面中引入swiper

import Swiper from "swiper"

2.在css中引入

@import "../../node_modules/swiper/dist/css/swiper.css";

.swiper-container{

height: 80px;

padding-left: 56px;

background-image: -webkit-radial-gradient(23% 100%, #2e79c3 0%, #297bc4 100%);

}

.swiper-slide{

width: auto!important;

display: inline-block;

margin-right: 40px;

height: 80px;

line-height: 80px;

font-size: 32px;

padding: 0 15px;

-webkit-box-sizing: border-box;

box-sizing: border-box;

text-align: center;

color: #fff;

cursor: pointer;

}

.swiper-container .swiper-slide .active {

color: #666;

background-color: #fff8eb;

box-shadow: 0 3px 13px 0 rgba(94, 94, 94, 0.50);

}

加入html

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

4.一定要在mounted里面引入方法

var swiper = new Swiper('.swiper-container', {

slidesPerView: 5,

freeMode: true,

loop:false

});

一番操作后就可以在实现一个横向滚动功能~