vue2.0里使用swiper(类似于广告例子)

最新推荐文章于 2024-05-24 17:24:45 发布

南风过境~

最新推荐文章于 2024-05-24 17:24:45 发布

阅读量247

点赞数

分类专栏： vue有关文章标签： vue swiper

本文链接：https://blog.csdn.net/qq_43688916/article/details/117993823

版权

vue有关专栏收录该内容

9 篇文章 0 订阅

订阅专栏

图例
在这里插入图片描述

安装
npm install swiper@3 --save-dev
在main.js里引入

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

使用html

<div class="box">
      <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,i) in 10" :key="i">
              <img src="/static/logo.png" alt="">
            </div>
          </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
      </div>
      <div class="swiper-container gallery-thumbs">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,i) in 15" :key="i">
              <img src="/static/logo.png" alt="">
            </div>
          </div>
      </div>
    </div>

mounted() {
	var galleryTop = new Swiper('.gallery-top', {
		nextButton: '.swiper-button-next',
		prevButton: '.swiper-button-prev',
	});
	var galleryThumbs = new Swiper('.gallery-thumbs', {
	   centeredSlides: true,
	   slidesPerView: 'auto',
	   touchRatio: 0.2,
	   slideToClickedSlide: true,
	});
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
 }

css

.gallery-top {
    width: 500px;
    height: 500px;
    margin: auto;
    background-color: #f4f2f1;
    .swiper-slide {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          max-height: 100%;
          max-width: 100%;
        }
    }
    }
    .gallery-thumbs {
        width: 500px;
        height: 200px;
        margin: auto;
        background-color: #000;
        box-sizing: border-box;
        margin-top: 100px;
        padding: 20px;
        .swiper-slide {
            width: 200px;
            height: 160px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
            img{
            max-height: 100%;
            max-width: 100%;
            }
        }
    }
    .gallery-thumbs .swiper-slide-active {
        border: 2px solid #D82B03;
    }

注意：
若图片为后台获取到的前进后退按钮则失去效果
解决方法

**//在Swiper初始化时添加observer:true（此方法不适用在判断图片集合不为空时显示）**
new Swiper('.gallery-thumbs', {
   observer:true, //修改swiper自己或子元素时自动初始化swiper
    observeParents:true, //修改swiper的父元素时自动初始化swiper
});
**//或者**
在获取到数据后
_this.$nextTick(()=>{
	//初始化swiper
}