|
当 嵌套的那个swiper-container不在第一个swiper-slide时,PC端测试,左右滑动箭头显示正常, WAP端需要左右划动一下,这个左右的箭头才出现,求大神帮帮忙,让这个左右箭头默认就显示,这样才方面给别人提示。。
HTML源码如下:
<!-- Swiper -->
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide">
<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper">
<div class="swiper-slide">Horizontal Slide 1</div>
<div class="swiper-slide">Horizontal Slide 2</div>
<div class="swiper-slide">Horizontal Slide 3</div>
<div class="swiper-slide">Horizontal Slide 4</div>
<div class="swiper-slide">Horizontal Slide 5</div>
</div>
<div class="swiper-pagination swiper-pagination-h"></div>
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-button-next swiper-button-black"></div>
</div>
</div>
<div class="swiper-slide">Vertical Slide 3</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-v"></div>
</div>
JS源码如下:
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
spaceBetween: 50
});
var swiperH = new Swiper('.swiper-container-h', {
//pagination: '.swiper-pagination-h',
//paginationClickable: true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
spaceBetween: 50,
loop: true
});
|
|