vue中实现图片自动横向无限滚动

可以使用vue-awesome-swiper插件来实现图片自动横向无限滚动。

1. 安装vue-awesome-swiper

npm install vue-awesome-swiper --save

2. 在组件中引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
 
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3. 在模板中使用

<template>
  <swiper
    :options="swiperOption"
    ref="mySwiper"
  >
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      <img :src="slide" />
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

4. 设置swiper参数

data() {
  return {
    swiperOption: {
      slidesPerView: 4, // 每次滚动显示几张图片
      spaceBetween: 10, // 图片之间的间距
      loop: true, // 是否开启无限循环
      autoplay: {
        delay: 3000, // 自动播放时间间隔
        disableOnInteraction: false // 用户操作后是否停止自动轮播
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true // 是否支持点击分页器切换
      }
    },
    slides: [
      'https://picsum.photos/300/200',
      'https://picsum.photos/300/200',
      'https://picsum.photos/300/200',
      'https://picsum.photos/300/200',
      'https://picsum.photos/300/200',
      'https://picsum.photos/300/200'
    ]
  }
}

通过以上配置，就可以实现图片自动横向无限滚动了。