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.最终实现好的样式:
     
                            
     
     
     
  • 相关阅读:
    day4笔记
    day3笔记
    day2 python基础 while 循环补充
    day1笔记 初识python,paython基础
    指针-1
    scanf输入与getchar的比较
    [递归]母牛的故事
    安装mysql以及遇到的问题解决
    33.指针
    32.字符串
  • 原文地址:https://www.cnblogs.com/cb1490838281/p/9648102.html
Copyright © 2011-2022 走看看