查看: 2251|回复: 0
打印 上一主题 下一主题

swiper横屏滚动嵌套竖屏滚动,会出现文字翻转现象

[复制链接]

该用户从未签到

1

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
跳转到指定楼层
楼主
发表于 2019-8-6 15:22:35 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
        </head>
        <style>
                .swiper-container {
                    width: 600px;
                    height: 300px;
                    border: 1px red solid;
                }
        </style>
        <body>
                <div class="swiper-container one" >
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Slide 1</div>
                        <div class="swiper-slide">
                               
                                <div class="swiper-container two" >
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide" >two 1</div>
                                                <div class="swiper-slide" >two 2</div>
                                            </div>
                                        </div>
                               
                        </div>
                        <div class="swiper-slide">Slide 3</div>
                    </div>
                </div>
        </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script>        
          var mySwiper = new Swiper ('.one', {
                effect: 'flip', //cube 3D  
                        showLabel: false,
                        grabCursor: true,
                        observer: true, //修改swiper自己或子元素时,自动初始化swiper
                        observeParents: true, //修改swiper的父元素时,自动初始化swiper
                        spaceBetween: 30,
                        centeredSlides: true,
                        preventClicks: false, //默认true
                        preventLinksPropagation: false,
                        loop: true, //循环播放
                        autoplay: 0,
               
          })
          
          var mySwiper2 = new Swiper ('.two', {
                direction: 'vertical',
                loop: true,
                speed: 1000,
                autoplay: {
                        delay: 1000,
                        disableOnInteraction: false //就算触摸了也继续滚动
                },
          })
          
        </script>
</html>

谷歌升级最新浏览器没有问题,搜狗浏览器会出现此问题,火狐也会。


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-23 23:54 , Processed in 0.065035 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表