Vue swiper轮播加图片预览

目前多个图片是这样的:

想要的效果：轮播 + 预览 （一次轮播一张）

1.首先要下载swiper 

备注:swiper 的坑

坑1

以前只需要安装vue-awesome-swiper就够了

现在需要weiper一起安装才行

坑2

按官网教程操作后vue会报错 找不到swiper.css

因为版本不同 项目目录变了 点开node安装文件夹里也只能看到'swiper/swiper-bundle.css'

如果用swiper-bundle.css会有很多问题，比如我遇到的就是分页器不生效

这里就需要降低swiper版本了 我这里使用的是5.4.5

下面代码请放心使用

cnpm install vue-awesome-swiper swiper@5.4.5 --save

注意：使用cnpm下载   

cnpm安装方法： 

npm install -g cnpm --registry=https://registry.npm.taobao.org        //获取淘宝镜像

2.在main.js中引入

import vueSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css'

Vue.use(vueSwiper)

3.图片预览+轮播

DOM 对象：（高亮部分）

 
class="loadBox margin-bottom">
        "'现场图'">
        
class="flex justify-center flex-wrap margin-top-xs margin-bottom-xs">
          
if="resdata.length <= 4">
            image
              v-for="(item, index) in resdata"
              :key="index"
              style="width: 235px; height: 190px;margin: 0 7px 5px 0;"
              :src="item.path"
              :preview-src-list="srcList"
            >
          
          
            
              
            

            

            

          
        
        
class="tc padding-tb" v-if="resdata.length <= 0">暂无数据 ~
      

data()

swiperOptions: {
        slidesPerView: 4, //显示个数
        pagination: {
          el: ".swiper-pagination"
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }

样式我也粘上吧 你们再根据项目效果自己调

// swiper
/deep/ .swiper-container {
  padding: 0 50px;
  .swiper-wrapper {
    width: 1160px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    width: 50px;
    height: 190px;
    top: 0;
    background: #fff;
    margin-top: 0;
    color: #999;
  }
  .swiper-button-prev {
    left: 0;
  }
  .swiper-button-next {
    width: 53px;
    right: -2px;
  }
  .swiper-button-prev.swiper-button-disabled,
  .swiper-button-next.swiper-button-disabled {
    opacity: 1;
    color: #e5e5e5;
  }
}

大功告成~~~

作者：微微一笑绝绝子

出处：https://www.cnblogs.com/wwyxjjz/p/15884347.html

本博客文章均为作者原创，转载请注明作者和原文链接。