Swiper自定义按钮样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!-- swiper.js自定义切换按钮 -->
<div class="related-switch">
    <!-- 如果需要导航按钮 -->
    <div id="prevBtn" onclick="mySwiper.slidePrev()" class="switch-btn"><i class="iconfont icon-zuo"></i></div>
    <div id="nextBtn" onclick="mySwiper.slideNext()" class="switch-btn"><i class="iconfont icon-you"></i></div>
</div>


<script>
    
	var mySwiper = new Swiper ('#swiper6', {
        direction: 'horizontal', // 垂直切换选项
		slidesPerView : 3,  
		spaceBetween : 20,
        loop: true, 
		autoplay: {    
            disableOnInteraction: false,  
            delay: 2000
        },   
      
        //  如果需要前进后退按钮
        navigation: {
            nextEl: '#nextBtn', // 指向下一页按钮元素的选择器或DOM对象
            prevEl: '#prevBtn' // 指向前一页按钮元素的选择器或DOM对象
        },

		
    
     })   
</script>
<!-- swiper.js自定义切换按钮 -->