VueSlickCarousel走马灯组件

糯米黑子

已于 2022-11-30 11:04:53 修改

阅读量1k

点赞数

文章标签： vue.js elementui

于 2022-09-06 16:41:32 首次发布

本文链接：https://blog.csdn.net/qq_52031916/article/details/126728210

版权

<template>

        <VueSlickCarousel v-bind="settings">

            <img v-for="icon in imgList" :src="realSrc(icon.coverImg)"         
            @click="goArticleList(icon.link)" class="img-method"/>

         </VueSlickCarousel>

</template>

<script>

import VueSlickCarousel from 'vue-slick-carousel'  //引进组件
// 引入css样式
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

export default {

  name: 'index',

  components: { VueSlickCarousel },

  data(){

    return{

      imgList:[

        //在文件里放上几个图片，随便引入图片路径（用于占位）
        //不放路径应该也可以，但我的不知道为什么不行，
        //不写路径就写成空（用于占位）
        //{},
        //{},
        //{}

      {url: require('@/assets/images/Special-method.png')},
      {url: require('@/assets/images/Special-country.jpg')},
      {url: require('@/assets/images/Special-mountain.jpg')},

      ],

      settings:{

       focusOnSelect: false,  //焦点选择

       infinite: true,

       speed: 500,           //速度

       autoplaySpeed: 4000,  //翻页速度

       slidesToShow: 4,    //幻灯片到显示

       slidesToScroll: 1,  //幻灯片到卷轴

       touchThreshold: 1,  //触摸阈值

       arrows: false,

       autoplay: true,

     }

    }

  },

 created() {

    this.getList();

  },

  methods: {
    

    getList() {

      /** 查询出图片的接口 */

      listTzSpecial().then(response => {

        this.imgList = response.rows;        //查询出数据存入数组

      });

    },

  }

}

</script>