zoukankan      html  css  js  c++  java
  • vue 轮播图显示三张图片,图片居中显示

    先上效果图

      

    1.使用页面引入swiper.css和swiper.js

     // 引入swiper组件
      import Swiper from "swiper";
      import "swiper/dist/css/swiper.min.css";

    2.html

    <div class="swiper-container">
             <div class="swiper-wrapper">
                 <div class="swiper-slide"><img src="./img/time.jpg" /></div>
                 <div class="swiper-slide"><img src="./img/time.jpg" /></div>
                 <div class="swiper-slide"><img src="./img/time.jpg" /></div>
                 <div class="swiper-slide"><img src="./img/time.jpg" /></div>
             </div>
         </div>

    3.css

     .swiper-container {
            margin-top: .1rem;
             3.75rem;
            height: 2rem;
            overflow: visible !important;
        }
    
        .swiper-container .swiper-wrapper .swiper-slide {
             3.1rem;
            border-radius: 20px;
        }
    
        .swiper-container .swiper-wrapper .swiper-slide img {
             100%;
            height: 2rem;
            border-radius: .1rem;
        }
    
        .swiper-container .swiper-wrapper .swiper-slide-prev {
            height: 2rem !important;
        }
    
        .swiper-container .swiper-wrapper .swiper-slide-prev img {
            height: 2rem !important;
        }
    
        .swiper-container .swiper-wrapper .swiper-slide-next {
            height: 2rem !important;
        }
    
        .swiper-container .swiper-wrapper .swiper-slide-next img {
            height: 2rem !important;
        }
    
        .swiper-container .swiper-wrapper .swiper-slide-active {
             3.1rem;
        }

    4.js

    <script src="./js/swiper.js"></script>
    <script>
        window.onload = function () {
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal',
                loop: true,
                autoplay: 5000,
                slidesPerView: "auto",
                centeredSlides: true,
                spaceBetween: 10,
            })
        }
    </script>
  • 相关阅读:
    NodeJS从零开始——NPM的使用
    初涉Node.js
    C# Double toString保留小数点方法
    SQL Server2008附加数据库之后显示为只读
    如何在64位的Windows中安裝PLSQLDEVELOPER 8
    SQL Server DATEADD() 函数
    flash builder Error #2032
    [SC] OpenSCManager FAILED 1722
    Windows Media Player安装了却不能播放网页上的视频
    SqlServer里DateTime转字符串
  • 原文地址:https://www.cnblogs.com/fanqiuzhuji/p/13161409.html
Copyright © 2011-2022 走看看