一、安装swiper
npm i swiper@3.4.2 -S
二、使用
<!--
* @Author: your name
* @Date: 2021-09-30 11:18:22
* @LastEditTime: 2021-09-30 13:02:18
* @LastEditors: DESKTOP-0USOKJQ
* @Description: In User Settings Edit
* @FilePath: \sp-site-front\src\views\text.vue
-->
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(hotSellGoods, index) in hotSellRecommend" :key="index">
<div>
<img :src="hotSellGoods.goodsPicture" class="swiper-img"/>
<h3>{{hotSellGoods.name}}</h3>
</div>
</div>
</div>
<div class="left_btn swiper-button-prev">
<i class="el-icon-arrow-right"></i>
</div>
<div class="right_btn swiper-button-next">
<i class="el-icon-arrow-left"></i>
</div>
</div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
data() {
return {
hotSellRecommend:[
{
goodsPicture:'',
name:'测试一'
},
{
goodsPicture:'',
name:'测试二'
},
{
goodsPicture:'',
name:'测试三'
},
{
goodsPicture:'',
name:'测试四'
},
{
goodsPicture:'',
name:'测试五'
},
{
goodsPicture:'',
name:'测试六'
},
{
goodsPicture:'',
name:'测试七'
},
{
goodsPicture:'',
name:'测试八'
}
]
};
},
mounted() {
this.getHotSellRecommendGoodsData();
},
methods: {
//获取数据之后渲染
getHotSellRecommendGoodsData() {
this.$nextTick(() => {
/* eslint-disable no-new */
new Swiper('.swiper-container', {
direction: 'horizontal', // 水平切换选项
loop: true, // 循环模式选项
autoplay: true,//可选选项,自动滑动
speed:3000, //切换次数
slidesPerView: 5, //一行5个
spaceBetween: 15, //每个中间隔15px
prevButton:'.swiper-button-prev', //上一张
nextButton:'.swiper-button-next', //下一张
})
})
}
}
};
</script>
<style scoped>
.swiper-container {
width: 960px;
margin-left: 20px;
display: flex;
align-items: baseline;
position: relative;
}
.swiper-img{
width: 180px;
height: 120px;
margin-bottom: 20px;
}
.swiper-slide h3{
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color:
line-height: 20px;
text-align: left;
margin: 0;
cursor: pointer;
}
.left_btn {
width: 29px;
height: 36px;
background: rgba(71,71,71,0.12);
border-radius: 0px 12px 12px 0px;
display: flex;
justify-content: center;
align-items: center;
color:
font-size: 5px;
position: absolute;
top: calc(50% - 18px);
left: -3px;
cursor: pointer;
z-index: 9;
}
.right_btn {
width: 29px;
height: 36px;
background: rgba(71,71,71,0.12);
border-radius: 12px 0px 0px 12px;
display: flex;
justify-content: center;
align-items: center;
color:
font-size: 5px;
position: absolute;
top: calc(50% - 18px);
right: 0px;
cursor: pointer;
z-index: 9;
}
</style>
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/806804c3bb8be01605e35c919d2b0bf1.png)