swiper 的左右箭头放到轮播外面
<!-- 增加一个father的包裹 --> <div class="swiper-father"> <div class="swiper-container swiper-container1"> <div class="swiper-wrapper"> <div class="swiper-slide">slide1</div> <div class="swiper-slide">slide2</div> <div class="swiper-slide">slide3</div> </div> <!-- siwper原本的箭头放在这里 --> <!-- <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> --> </div> <!-- 我们把swiper 的箭头放到swiper 外面 --> <div class="swiper-button-prev swiper-button-prev1"></div> <div class="swiper-button-next swiper-button-next1"></div> </div>
.swiper-container { border: 1px solid red; width: 400px; height: 400px; } .swiper-slide { width: 400px; height: 400px; background: orange; } .swiper-father { width: 500px; height: 400px; border: 1px solid red; position: relative; }
var mySwiper = new Swiper('.swiper-container1', { direction: 'horizontal', loop: false, navigation: { nextEl: '.swiper-button-next1', prevEl: '.swiper-button-prev1', }, });