zoukankan      html  css  js  c++  java
  • 【swiper轮播插件】解决swiper轮播插件触控屏问题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link charset="UTF-8" rel="stylesheet" href="css/spinner.css">
        <style>
            .swiper-container {
                width: 100%;
                height: 1.41rem;
                overflow: hidden;
            }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    </head>
    <body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">slider1</div>
            <div class="swiper-slide">slider2</div>
            <div class="swiper-slide">slider3</div>
        </div>
        </div>
        <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 水平切换选项
            autoplay:true,
            observer:true, 
            observeParents:true,
          effect : 'coverflow',// cube  // 切换效果
            autoplayDisableOnInteraction:false,
            touchRatio : 0.5,//触摸变慢
            effect : 'cube',
            dynamicBullets:true,
        })
        </script>
    </body>
    </html>
  • 相关阅读:
    php——验证身份证是否合法的函数
    php——离线执行任务
    代码整洁之道
    js自适应屏幕高度
    SSH Junit4测试
    Java Persistence with Hibernate
    SSH搭建
    js整理
    Hibernate 应用
    对学习的一点感想
  • 原文地址:https://www.cnblogs.com/ivan5277/p/10492348.html
Copyright © 2011-2022 走看看