轮播图vue-awesome-swiper：一行显示多张且图片有描述

安装及配置

标题安装命令：

npm install swiper vue-awesome-swiper --save  

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper);

swiper.css文件是在node_modules文件夹中，如果swiper版本在6.0.0及以上就要将import 'swiper/css/swiper.css’换成import ‘swiper/swiper-bundle.css’，否则就会报错。

在当前页面中

import {Swiper,SwiperSlide } from "vue-awesome-swiper";
//
components: {
      Swiper,
      SwiperSlide
    },

template

<swiper :options="swiperOption"
              ref="mySwiper">
        <swiper-slide class="swiper-slide"
                      v-for="(item,index) in collocateContentDtos"
                      :key="index"
                      :style="{ backgroundImage:'url('+ item.image+')',backgroundSize:'100%'}">
<!--          @click.native="goJump(item)" 每一个图片的点击事件-->
          <div class="bs-swiper-bottom">
            <div>{{item.desc}}</div>
            <div>{{item.date}}</div>
          </div>

        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>

script

 data(){
      return{
        collocateContentDtos:[
          {
            image:'https://img.yzcdn.cn/vant/apple-1.jpg',
            desc:'图片一',
            date:'2020-01-05',
          },
          {
            image:'https://img.yzcdn.cn/vant/apple-2.jpg',
             desc:'图片一',
            date:'2020-01-05',
          },
          {
            image:'https://img.yzcdn.cn/vant/apple-3.jpg',
             desc:'图片一',
            date:'2020-01-05',
          },
          {
            image:'https://img.yzcdn.cn/vant/apple-4.jpg',
            desc:'图片一',
            date:'2020-01-05',
          },
          {
            image:'https://img.yzcdn.cn/vant/apple-1.jpg',
             desc:'图片一',
            date:'2020-01-05',
          },
          {
            image:'https://img.yzcdn.cn/vant/apple-3.jpg',
             desc:'图片一',
            date:'2020-01-05',
          }
        ],
     
        swiperOption:{
          slidesPerView: 4,  //一行显示4个
          spaceBetween: 10,  //间隔30
          freeMode: true,
          speed: 1000,   //滑动速度
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        },

      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
    },

style

.swiper-container{
    width:100%;
    padding:0 5px;
  }
.swiper-slide {
    width: 30%;
    height: 70px;
    position:relative;
  }
  .bs-swiper-bottom{
    position:absolute;
    bottom:0;
    width:100%;
    height:20px;
  background-color: rgba(65, 105, 225, 0.7);
    color:#fff;
    font-size:10px;
    display:flex;
    justify-content: space-around;
    align-items: center;
  }

效果