zoukankan      html  css  js  c++  java
  • Swiper插件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>swiper简介_导入_以及使用.</title>
        <!-- swiper
        是帮助完成PC端,移动端,滑动效果的库.
        在使用过程当中, 
        
        可以选择依赖jquery的库, 也可以选择独立的js文件.
        两者大小有所差别, 独立文件大约10k.
        (3.0-)
    
        4.0+版本取消了对jquery依赖库的选择.
    
    
        === 在导入过程中.
    
        需要导入swiper的js文件和css式样文件. 放在自定式样之上.
    
        先导入css文件, 再导入js文件
    
         -->
        <link rel="stylesheet" type="text/css" href="web-rem/css/swiper.min.css">
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="js/swiper.jquery.min.js"></script>
        <script type="text/javascript">
            // 使用swiper库的时候,可以对元素直接增加类.swiper-container.wrapper.slide.pagination.(button)prev,next
    
    
            $(function(){
    
                // var swiper = new Swiper('.swiper-container');
                // 变量接收优化性能.
    
                new Swiper('.swiper-container');
                // 新建Swiper对象,赋值于式样名..  (容器)
                // 赋值过后该式样下, 与既定规则相同的类名, 即可拥有式样.
                // 必须元素===> 容器(container)>封套,包装(wrapper)>滑动对象(slide)
    
            })
    
        </script>
        <style>
    
    
        .swiper-container {
            /*容器的长宽会随slide发生变化, 可不设.*/
        }
        .swiper-slide {
            font: 33px/333px "Microsoft Yahei";
            background: #ddd;
    
        }
    
        </style>
    
    </head>
    <body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">slide1</div>
                <div class="swiper-slide">slide2</div>
                <div class="swiper-slide">slide3</div>
                <div class="swiper-slide">slide4</div>
                <div class="swiper-slide">slide5</div>
                <div class="swiper-slide">slide6</div>
            </div>
        </div>
        
    </body>
    </html>
  • 相关阅读:
    odoo14系列笔记-基本进销存(二)
    odoo14系列笔记-基本进销存(一)
    PVE另一种方法使用中科大的镜像服务器 NGINX反向代理
    git 国内加速
    VirtualBox开启套娃模式-打开嵌套 VT-x/AMD-V 功能
    K8S集群安装(基于DEIBAN,proxmox)
    JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
    8个非常实用的Vue自定义指令
    require和import的区别
    js异步加载之defer、async、type=module
  • 原文地址:https://www.cnblogs.com/jrri/p/11348555.html
Copyright © 2011-2022 走看看