swiper 实现自定义左右按钮切换

最新推荐文章于 2024-07-02 22:14:33 发布

潘潘！

最新推荐文章于 2024-07-02 22:14:33 发布

阅读量2.4k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/pmywy/article/details/133276323

版权

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper-bundle.min.js"></script>
    ...
</body>
</html>
<div class="swiper">
    <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 class="swiper-pagination"></div>
     <div class="swiperBtn" onclick="onadd()"> </div>
     <div class="swiperBtn_r" onclick="add()"> </div>
  
</div>
<style>
.swiper {
    width: 600px;
    height: 300px;
}  
</style>
<script>        
  var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
   
  })     
 function onadd() {
        // console.log('切换到上一张轮播图');
        mySwiper.slidePrev();

    }
    function add() {
        // console.log('切换到下一张轮播图');

        // 切换到下一张轮播图
        mySwiper.slideNext();
    }  
  </script>

注：按钮的样式自己设置，我的是一个背景图