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

关于swiper 如果用了fixed定位的问题

[复制链接]

该用户从未签到

1

主题

1

帖子

18

积分

新手上路

Rank: 1

积分
18
跳转到指定楼层
楼主
发表于 2016-7-11 11:04:52 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
  1. //这是图片列表
  2. <div class="imglist">
  3.                             <img src="img/1b.jpg" />
  4.                             <img src="img/2b.jpg" />
  5.                             <img src="img/3b.jpg" />
  6.                             <img src="img/4b.jpg" />
  7.                             <img src="img/5b.jpg" />
  8.                             <img src="img/6b.jpg" />
  9.                             <img src="img/7b.jpg" />
  10.                             <img src="img/8b.jpg" />
  11.                             <div>
  12.                             </div>
  13.                         </div>
  14. //用模态框+swiper来展示大图片
  15. <div class="modal modal_img" style="display: none">
  16.             <div class="modal_body">
  17.                 <div class="close_modal">
  18.                     x</div>
  19.                 <div class="swiper-img" style="position: relative">
  20.                     <div class="swiper-wrapper">
  21.                         <div class="swiper-slide">
  22.                             <img src="img/1b.jpg" />
  23.                         </div>
  24.                         <div class="swiper-slide">
  25.                             <img src="img/2b.jpg" />
  26.                         </div>
  27.                         <div class="swiper-slide">
  28.                             <img src="img/3b.jpg" />
  29.                         </div>
  30.                         <div class="swiper-slide">
  31.                             <img src="img/4b.jpg" />
  32.                         </div>
  33.                         <div class="swiper-slide">
  34.                             <img src="img/5b.jpg" />
  35.                         </div>
  36.                         <div class="swiper-slide">
  37.                             <img src="img/6b.jpg" />
  38.                         </div>
  39.                         <div class="swiper-slide">
  40.                             <img src="img/7b.jpg" />
  41.                         </div>
  42.                         <div class="swiper-slide">
  43.                             <img src="img/8b.jpg" />
  44.                         </div>
  45.                     </div>
  46.                     <div class="swiper-pagination">
  47.                     </div>
  48.                 </div>
  49.             </div>
  50.         </div>
  51. //js
  52. $(".imglist img").bind("click", function () {
  53.             var index = $(this).index();
  54.             $(".modal_img").fadeIn(300);
  55.             imgSwiper.slideTo(index);
  56.         });

复制代码

现在的问题是
1. slideto没有效果,因为swiper-wrapper 的transform失效
2.只能手动滑动, 并且不是一页一页的滑动,而是一点一点的滑动。 就没有了分页的效果
根据我的观察, 应该是  模态框使用了fixed定位的原因。
那么如何解决这个问题呢
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-16 05:41 , Processed in 0.082784 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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