前言
今天任务需要用swiper 做滑动,我就很简单的用滑动插件swiper 来做。但是很神奇的,我按照正常的流程写,但是滑动就是没有生效。
我的代码是这样的
<div id="step1">
</div>
<div id="step2" style="display:none;">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
</div>
类似的 我需要在第一个div隐藏掉,第二个div 展示出来然后定义滑动。可是没有成功。
原因
找了很久发现是 div:display:none 的原因。。。
因此我单独做了测试:
<div id="one" style="display:none;">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 4,
paginationClickable: true,
spaceBetween: 40
});
$("#one").fadeIn();
这个就不能滑动
$("#one").fadeIn();
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 4,
paginationClickable: true,
spaceBetween: 40
});
这样就可以滑动。。
但是我自己的项目代码里面 先fadeIn() 也不能正常初始化。可能还有其他的坑。但是我已经知道,如果不用display:none . 就可以避开这个。
解决
div 原来等于 display:none 的 我都用opacity 和 z-index 实现,可以正常初始化我自己的swiper了。
但是我还是不知道为什么 display:none 就不能初始化成功。
而且我自己的代码 明明是先fadeIn() 的 还是会出现 初始化不成功的现象。所以还需要后观察。
但是可以确定,display:none 一定对 new swiper 有影响!!!