vue-----swiper

swiper

1.下载
cnpm install swiper --save-dev

2.引入

import Swiper from "swiper";

import "../../../node_modules/swiper/dist/css/swiper.css";

基本使用

 <div class="swiper-container banner-swiper" > 
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>

基本配置项

var mySwiper = new Swiper(".banner-swiper", {
      //   direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项
    //   autoplay: true,
    autoplay:{
        //自动切换的时间间隔，单位ms
        delay: 1000,
        //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        disableOnInteraction:false,
    },

      //开启鼠标滚轮控制Swiper切换
      mousewheel: true,
     
      //设置slider容器能够同时显示的slides数量
      //   slidesPerView:2,

      //鼠标成手状
      //grabCursor:true,

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        //点击分页器，可进行切换
        clickable: true,
        //点击slide时显示/隐藏分页器，如果遇到无效，可增加样式 .swiper-container .swiper-button-hidden{ opacity : 0; }。
         hideOnClick :true,
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
        //点击slide时显示/隐藏前进后退按钮，如果遇到无效，可增加样式 .swiper-container .swiper-button-hidden{ opacity : 0; }。
        hideOnClick :true,
      },
      // 如果需要滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
          //允许拖动滚动条
           draggable: true,
           //滚动条是否自动隐藏。默认：false，不会自动隐藏。
        //    hide:true,

        }
    });