zoukankan      html  css  js  c++  java
  • swiper小例子

    1、下载 npm i swiper -S

    2、添加swiper的css、js

       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">

       <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>

    3、html样式

      <div class="swiper-container">

        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="http://img2.imgtn.bdimg.com/it/u=3588772980,2454248748&fm=27&gp=0.jpg" alt=""><p>123443322</p></div>
          <div class="swiper-slide"><img src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" alt=""><p>dadasdasdasd</p></div>
          <div class="swiper-slide"><img src="http://img5.imgtn.bdimg.com/it/u=1046983545,2051560208&fm=27&gp=0.jpg" alt=""><p>阿斯打扫打扫打扫大大的</p></div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    4、创建实例
      var mySwiper = new Swiper ('.swiper-container', {
          loop: true,
          autoplay: {
          delay: 1000,
          disableOnInteraction: false
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      })
      mySwiper.el.onmouseover = function(){
        mySwiper.autoplay.stop();
      }
      mySwiper.el.onmouseout = function(){
        mySwiper.autoplay.start();
      }
    4、css样式
      自己看着办(๑•̀ㅂ•́)و✧ 嘻嘻
    5、详细请查看文档
      http://www.swiper.com.cn/api/index.html
  • 相关阅读:
    Hibernate关于字段的属性设计
    Hibernate之增删查改常见错误
    Hibernate之实体类设计基本步骤
    Github开源之旅第二季-MarkDown
    8.Git命令(上)
    9.Git命令(下)
    7.Git Bash操作的四个坑(基本LINUX操作)
    Webserver-HTTP项目(深入理解HTTP协议)
    JAVA入门到精通-第94讲-山寨QQ项目8-好友在线提示
    JAVA入门到精通-第93讲-山寨QQ项目7-好友在线提示
  • 原文地址:https://www.cnblogs.com/naxiaoming/p/8617616.html
Copyright © 2011-2022 走看看