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
  • 相关阅读:
    c# 系统校时工具类
    c# 字符串工具类
    c# 自定义排序类(冒泡、选择、插入、希尔、快速、归并、堆排序等)
    c# 获取随机数字/字符/时间
    c# 汉字转拼音
    c# 获取机器硬件信息 (硬盘,cpu,内存等)
    c# 实体处理工具类
    Ubuntu 查看和杀死进程
    shell 脚本杀死后台由php脚本控制运行的所有php脚本和java程序
    【Shell脚本】怎样表示一个for循环
  • 原文地址:https://www.cnblogs.com/naxiaoming/p/8617616.html
Copyright © 2011-2022 走看看