vue 使用swiper

最新推荐文章于 2024-03-01 16:46:29 发布

原创最新推荐文章于 2024-03-01 16:46:29 发布 · 5.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#swiper

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何利用Swiper库实现网页上的图片轮播效果，包括引入Swiper库、设置图片轮播的布局结构及实例化Swiper组件的具体步骤。

1、引入

    import Swiper from 'swiper'

    @import '../../common/css/swiper.css';

2、布局

    <div class="swiper-container">
          <div class="swiper-wrapper">
            <div v-for='(i,index) in arrItem' :key='index' class="swiper-slide">
              <div class="iSlide">
                  <img class="img" :src="i.imgUrl">
                </div>
            </div>
          </div>
        </div>

3、实例化

      export default{  
          mounted:function(){
            var mySwiper = new Swiper('.swiper-container', {

            })
          },
          data(){
            return {
                arrItem:[
                    {
                        name:'swiperSlide5',
                        imgUrl:'http://pic.58pic.com/58pic/13/60/16/64b58PICXEK_1024.jpg'
                    },
                    {
                        name:'swiperSlide1',
                        imgUrl:'http://image.qmango.com/hotelimg/dl1210/109490/109.jpeg'
                    },
                    {
                        name:'swiperSlide51',
                        imgUrl:'http://image.qmango.com/hotelimg/dl1210/125708/181.jpeg'
                    },
                    {
                        name:'swiperSlide1111115',
                        imgUrl:'http://image.qmango.com/hotelimg/dl1210/119297/793.jpeg'
                    }
                ]
            }
          }
         }