swiper tab切换 实现左右tab切换和滚动

目标效果

使用swiper实现以上效果，一定注意 swiper版本 之间的区别。
本次代码基于 swiper v5.4.5 ，在swiper6和swiper4版本下也启动成功，但是在 swiper3 无法启动。
代码如下：

var swiper = new Swiper('.swiper-container', {
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            bulletClass: 'pag',
            bulletActiveClass: 'pag-active',
            renderBullet: function (index, className) {
              switch (index) {
                case 0:
                  return '<div class="' + className + '"><span>账号查询</span></div>';
                  break;
                case 1:
                  return '<div class="' + className + '"><span>状态查询</span></div>';
                  break;

                default:
                  break;
              }

            },
          },
        });

.swiper-pagination{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 0.8rem;
      outline: none;
      background: #F5EFFF;
    }
    .pag{
      outline: none;
      
    }
    .pag-active{
      color: red;
      border-bottom: 0.05rem solid red;
    }

pagination标签和swiper-container便签同级

swiper tab切换 实现左右tab切换和滚动

官方文档

戳我