Swiper.js轮播自动播放初始启动延迟实现方案咨询

我用Swiper.js实现了一个自动播放的轮播组件，同时通过DOMContentLoaded事件实现页面淡入效果。这导致页面显示时，第一张幻灯片已经切换或正在切换，其显示时长远短于其他幻灯片。

请问是否可以延迟自动播放轮播的初始启动？我知道可为单张幻灯片添加延迟，但这样会导致循环到第一张时，其显示时长比其他幻灯片更长。

现有代码 #

JavaScript代码 #

window.addEventListener('DOMContentLoaded', function() {
  document.body.className = 'visible';
});

var caption = document.querySelector('.swiper-caption span');

new Swiper('.swiper', {
    // Disable preloading of all images
    preloadImages: true,
    // Enable lazy loading
    lazy: false,
    effect: 'fade',
    fadeEffect: {
        crossFade: true
    },
    loop: true,
    autoplay: {
        delay: 1200,
        disableOnInteraction: false,
        pauseOnMouseEnter: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction'
    },
    on: {
        init: function() {
            updateCaptionText(this);
        },
        activeIndexChange: function() {
            updateCaptionText(this);
        }
    }
});

function updateCaptionText(slider) {
    caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}

CSS代码 #

body.hidden {
    opacity: 0;
}

body.visible {
    opacity: 1;
    transition: opacity .48s .24s ease-out;
}

解决方案 #

方法1：初始关闭自动播放，页面淡入完成后再启动 #

页面淡入的总时长为过渡时间（0.48s）加上延迟时间（0.24s），共720ms。我们可以在页面淡入完成后手动启动Swiper的自动播放，确保首张幻灯片从用户可见时开始计时：

修改后的JavaScript代码：

window.addEventListener('DOMContentLoaded', function() {
  document.body.className = 'visible';
  // 等待页面淡入完成后启动自动播放
  setTimeout(() => {
    swiper.autoplay.start();
  }, 720);
});

var caption = document.querySelector('.swiper-caption span');

// 初始化时关闭自动播放
const swiper = new Swiper('.swiper', {
    preloadImages: true,
    lazy: false,
    effect: 'fade',
    fadeEffect: {
        crossFade: true
    },
    loop: true,
    autoplay: false, // 初始关闭自动播放
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction'
    },
    on: {
        init: function() {
            updateCaptionText(this);
        },
        activeIndexChange: function() {
            updateCaptionText(this);
        }
    }
});

function updateCaptionText(slider) {
    caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}

方法2：在Swiper初始化回调中重置自动播放计时器 #

如果不想完全关闭初始自动播放，可以在init回调中先停止自动播放，等待页面淡入完成后再重新启动，确保首张幻灯片的计时从用户可见时开始：

修改后的JavaScript代码：

window.addEventListener('DOMContentLoaded', function() {
  document.body.className = 'visible';
});

var caption = document.querySelector('.swiper-caption span');

new Swiper('.swiper', {
    preloadImages: true,
    lazy: false,
    effect: 'fade',
    fadeEffect: {
        crossFade: true
    },
    loop: true,
    autoplay: {
        delay: 1200,
        disableOnInteraction: false,
        pauseOnMouseEnter: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction'
    },
    on: {
        init: function() {
            updateCaptionText(this);
            // 重置自动播放计时器
            this.autoplay.stop();
            setTimeout(() => {
                this.autoplay.start();
            }, 720);
        },
        activeIndexChange: function() {
            updateCaptionText(this);
        }
    }
});

function updateCaptionText(slider) {
    caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}

核心逻辑 #

页面淡入过程中用户无法看到内容，但Swiper已经开始自动播放计时，导致首张幻灯片的有效显示时长被压缩。通过等待页面淡入完成后再启动/重置自动播放，就能让所有幻灯片的显示时长保持一致，同时避免循环时首张幻灯片时长异常的问题。

内容的提问来源于stack exchange，提问作者user1406440