鍍金池/ 問(wèn)答/HTML5  HTML/ swiper插件寫的輪播圖,自動(dòng)輪播圖片時(shí)第一次輪播第一張圖輪播到第二張圖的時(shí)候

swiper插件寫的輪播圖,自動(dòng)輪播圖片時(shí)第一次輪播第一張圖輪播到第二張圖的時(shí)候特別快,一閃而過(guò)

如題
html

<!-- 輪播圖 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="/assets/static/images/banner1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/assets/static/images/banner2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/assets/static/images/banner3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/assets/static/images/banner4.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/assets/static/images/banner5.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/assets/static/images/banner6.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/assets/static/images/banner7.jpg" alt=""></div>
                <div class="swiper-slide"><img src="/assets/static/images/banner8.jpg" alt=""></div>
            </div>
            <!-- 如果需要分頁(yè)器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要導(dǎo)航按鈕 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滾動(dòng)條 -->
            <div class="swiper-scrollbar"></div>
        </div>

js

 //輪播圖輪播部分
        var mySwiper = new Swiper(".swiper-container", {
            observer: true, //解決數(shù)據(jù)傳入后輪播問(wèn)題
            observerParents: true,
            autoResize: true, //尺寸自適應(yīng)
            initialSlide: 0,
            direction: "horizontal",
            /*橫向滑動(dòng)*/
            loop: true,
            /*形成環(huán)路(即:可以從最后一張圖跳轉(zhuǎn)到第一張圖*/
            slidesPerView: 'auto',
            loopedSlides: 0,
            pagination: ".swiper-pagination",
            /*分頁(yè)器*/
            paginationClickable: true,
            autoplay: 3000,
            /*每隔3秒自動(dòng)播放*/
            autoplayDisableOnInteraction: false /*點(diǎn)擊之后是否停止自動(dòng)輪播*/
        })
    </script>

不知道是哪里出了問(wèn)題,是插件的bug嗎?麻煩大家解答一下,謝謝!

回答
編輯回答
她愚我

https://www.wx2share.com/Arti...

你先對(duì)比我這個(gè),看看速度,如果效果和我的一樣的,哪就沒(méi)有問(wèn)題,如果比我這個(gè)快太多,哪就可能哪里有問(wèn)題了,
注意 swiper版本,新版本,參數(shù)不一樣了

切換速度是通過(guò)
transition-duration 來(lái)設(shè)置的,默認(rèn)是 300ms debug 一下,看看 是不是哪里把這個(gè)值覆蓋了,

新版本參數(shù)設(shè)置方式

 var swiper = new Swiper(this.$el, {
            autoplay: {
                enabled: true,
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                renderBullet: function(index, className){
                    return `<div class="bullet ${className} " data-target="${index}">
                                <p class="bullet-scribe">${items[index].title}</p>
                                <div class="bullet-slide" style="background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(${items[index].titleImg}/w1000)"></div>
                            </div>`
                }
            },
            spaceBetween: 30
        });
2017年7月23日 11:20