Javascript 使用Swiper.JS进行幻灯片转换时出现问题

我有一个带有分页按钮（命名为1,2,3）的3张幻灯片。正常情况下，当我按按钮最大1步/位置（从1到2，从3到2，从2到1）时，一切正常。但是当我切换按钮的位置较大时（从1到3，从3到1），在滑动过渡期间，我可以清楚地看到在这个中间所有幻灯片的快速闪光（在这种情况下，我指的是幻灯片1和3之间的幻灯片2的闪光）。我希望你能理解这个难题的描述。请问我该怎么修

多谢各位

幻灯片8
幻灯片9
幻灯片10

变量菜单=['1'，'2'，'3']
var mySwiper=new Swiper（“.Swiper container”{
//如果我们需要分页
效果：“褪色”，
paginationClickable:true，
分页：{
el:“.swiper分页”，
可点击：正确，
renderBullet:函数（索引、类名）{
返回“”+（菜单[索引]）+“”；
},
}
})

请添加一个工作代码示例。。。你也看到这个问题了吗？（是/否）

<div class="swiper-container">
   <div class="swiper-wrapper">
       <div class="swiper-slide" style="background-image: url(./assets/img/hero.jpg);">Slide 8</div>
       <div class="swiper-slide" style="background-image: url(./assets/img/hero1.jpg);">Slide 9</div>
       <div class="swiper-slide" style="background-image: url(./assets/img/hero2.jpg);">Slide 10</div>
   </div>
       <!-- Add Pagination -->
       <div class="swiper-pagination" slot="pagination"></div>
</div>

<script>
        var menu = ['1', '2', '3']
        var mySwiper = new Swiper ('.swiper-container', {
        // If we need pagination
        effect: 'fade',
        paginationClickable: true,
        pagination: {
        el: '.swiper-pagination',
                clickable: true,
            renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (menu[index]) + '</span>';
            },
        }
        })
</script>