zoukankan      html  css  js  c++  java
  • 在vue中使用swiper4.x

    需求 :实现一个左右两边有边距的轮播图vue+swiper4

        轮播图左右两边含有上一张和下一张的一部分

         先安装swiper:

         1.npm install swiper 安装swiper

      2.在入口文件main。js引入 import "swiper/dist/css/swiper.min.css";

         3.在你需要实现轮播的模块注册: import Swiper from "swiper";
         4.在template中写好结构:
          <!-- 轮播 -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" alt=""></div>
            <div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" alt=""></div>
            <div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" alt=""></div>
            <div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" alt=""></div>
            <div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" alt=""></div>
            <div class="swiper-slide"><img class="img_c1" src="../../images/family/选项框.png" alt=""></div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
     
      5.在钩子函数mounted(){}中做配置:
        var swiper = new Swiper(".swiper-container", {
          slidesPerView: 1.36,
          centeredSlides: true,
          spaceBetween: 30,
          pagination: {
          el: ".swiper-pagination",
          clickable: true
          }
        });
      6.最终实现好的样式:
     
                            
     
     
     
  • 相关阅读:
    Oracle--pl/sql编程-分支语句(判断、循环)
    axios二次封装及API接口统一管理
    Vuejs之axios获取Http响应头
    对webpack和gulp的理解和区别
    nodejs+redis使用
    Linux安装Nginx、Redis、django
    js 原型里面写方法
    在layui中使用 jquery 触发select 的 change事件无效
    promise看这篇就够了
    vue 封装原型方法 加 promist .then
  • 原文地址:https://www.cnblogs.com/cb1490838281/p/9648102.html
Copyright © 2011-2022 走看看