Swiper4写的页面左右切换展示（类似于微场景）效果，在苹果手机中点击切换，白屏，而且不跳转下一页

Question

如题，用Swiper4结合swiper.animate实现的页面场景展示网页，在pc,安卓手机都正常，在ios手机中，点击左右切换按钮的时候，先是页面空白，重新加载，然后没有跳转到下一页,请问大佬们是什么情况？

html：

                    <div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/taobsh.jpg" class="p5_bg" />
                        <img src="images/tao_02.png" class="p33_tao" />
                        <img src="images/tao_02.png" class="p33_tao1" />
                        <img src="images/taoshu_01.png" class="p33_taoshu" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/bg_tabo.jpg" class="p5_bg" />
                        <img src="images/ttao.png" class="p34_hua" />
                        <img src="images/ttao.png" class="p34_hua1" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/p35_bg.jpg" class="p5_bg" />
                        <img src="images/ps_02.png" class="tresa" />
                        <img src="images/p35_tree_01.png" class="p35_hua" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/p36_bg.jpg" class="p5_bg" />
                        <img src="images/left_fod_02.png" class="left_fot" />
                        <img src="images/right_fod_03.png" class="right_fot ani" swiper-animate-effect="qians" swiper-animate-duration="3s" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/ddgh.jpg" class="p5_bg" />
                        <img src="images/ppfots_03.png" class="pp_fot" />
                        <img src="images/ppfots_07.png" class="pp_fots" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/p38_Bg.jpg" class="p5_bg" />
                        <img src="images/chuangl_02.png" class="cls" />
                        <img src="images/p38_user_02.png" class="clse" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/p39_fots.jpg" class="p5_bg" />
                        <img src="images/p39_fot_03.png" class="p39_gs" />
                    </div>
                    <div class="swiper-slide swiper-no-swiping ">
                        <img src="images/p40_bgs.jpg" class="p5_bg" />
                        <img src="images/p40_Fot_03.png" class="p40_gs" />
                    </div>
                </div>
                <img src="images/nextious.png" class="next " />
                <img src="images/previous.png" class="prev " />
                <img src="images/mp3.png" class="play" />

js功能部分：

<script>
            var num = 0;
            var num1 = 0;
            var times1 = setInterval(function() {
                if(num1 == 100) {
                    clearInterval(times1)
                    swiper.slideNext();
                    var times = setInterval(function() {
                        if(num <= 4) {
                            num++;
                        } else {
                            console.log(1)
                            $('.next').fadeIn()
                            $('.prev').fadeIn()
                            swiper.slideNext();
                            clearInterval(times)
                        }
                    }, 1000)
                } else {
                    num1++;
                    $('.dus div span').css('width', num1 + '%')
                    $('.du .dus p').html(num1 + '%')
                }
            }, 20)
            //这里出现了问题
            $('.next').click(function() {
                swiper.slideNext();
            })
             //这里出现了问题
            $('.prev').click(function() {
                swiper.slidePrev();
            })
            var swiper = new Swiper('.swiper-container', {
                pagination: {
                    el: '.swiper-pagination',
                },
                on: {
                    init: function() {
                        swiperAnimateCache(this); //隐藏动画元素 
                        this.emit('slideChangeTransitionEnd'); //在初始化时触发一次slideChangeTransitionEnd事件
                    },
                    slideChangeTransitionEnd: function() {
                        swiperAnimate(this); //每个slide切换结束时运行当前slide动画
                        this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展示一次
                    }
                },
    
                //            effect: 'fade',
                //            speed: 2000,
            });
    
            var audio = document.getElementById('audio');
            document.addEventListener("WeixinJSBridgeReady", function() {
                document.getElementById('audio').play();
            }, false);
            $('.play').click(function() {
                if(audio.paused) {
                    audio.play();
                } else {
                    audio.pause();
                }
            })
            audio.play();
        </script>

Answer 1

同样这个问题，求解怎么解决的，部分苹果手机不好用