Swiper中文论坛

标题: swiper横屏滚动嵌套竖屏滚动，会出现文字翻转现象 [打印本页]

作者: zr9883 时间: 2019-8-6 15:22
标题: swiper横屏滚动嵌套竖屏滚动，会出现文字翻转现象
<!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>

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

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)