0

我无法创建一个代码笔来演示这个问题（太多的依赖项无法解决）所以希望描述就足够了。

我成功地将swiper.js与2020结合用于一个项目。在包括 Microsoft Edge 在内的所有现代浏览器中，这两个部分协同工作。

<div class="swiper-container horizontal-slider">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
            <div class="swiper-slide" data-hash="slide1">
                <div class="twentytwenty-container"><img src="./img/projects/slide1_before.jpg" />
                <img src="./img/projects/slide1.jpg" /></div>
            </div>
            <div class="swiper-slide" data-hash="slide2"><img src="./img/projects/slide2.jpg" /></div>
            <div class="swiper-slide" data-hash="slide3"><img src="./img/projects/slide3.jpg" /></div>
            <div class="swiper-slide" data-hash="slide4"><img src="./img/projects/slide4.jpg" /></div>
            <div class="swiper-slide" data-hash="slide5">
                <div class="twentytwenty-container"><img src="./img/projects/slide5_before.jpg" />
                <img src="./img/projects/slide5.jpg" /></div>
            </div>
            <div class="swiper-slide" data-hash="slide6"><img src="./img/projects/4English-slide6.jpg" /></div>
            <div class="swiper-slide" data-hash="slide7"><img src="./img/projects/slide7.jpg" /></div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
</div>

这就是 jQuery 3.2.1 的全部内容。

$(function(){
    mainSwiper = new Swiper ('.swiper-container', {
        // Optional parameters
        loop: true,
        spaceBetween: 10,
        slidesPerView: 'auto',
        loopedSlides: 5,
        autoplay: {
            delay: 2500,
        },              

        keyboard: {
            enabled: true,
        },
        hashNavigation: {
            watchState: true,
        },

        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    });
});

$(".twentytwenty-container").twentytwenty({
    default_offset_pct: 0.1, // How much of the before image is visible when the page loads
    before_label: '', // Set a custom before label
    after_label: '', // Set a custom after label
    no_overlay: true, //Do not show the overlay with before and after
    //click_to_move: true // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
});

并且使用一些 jQuery 来禁用在选择“手柄”时从幻灯片移动到幻灯片，您不会获得视差效果（触摸设备等部件有更多部分，但此处不适用）。

$(".twentytwenty-handle").mousedown(function() {
    if (mainSwiper.autoplay.running) { mainSwiper.autoplayWasRunning = true; mainSwiper.autoplay.stop(); }
    mainSwiper.allowTouchMove = false;
}).mouseup(function() {
    if (mainSwiper.autoplayWasRunning) { mainSwiper.autoplay.start(); }
    mainSwiper.allowTouchMove = true;
});

我以为一切都准备好了。jquery.event.move当我发现 2020 需要的脚本对 IE 有 polyfill 要求时，我继续进行测试。一旦这些被整理出来，一切都加载到 IE 中。但是当我点击手柄时，关于二十二十的事情没有发生。整个幻灯片移动了，console.log在事件中添加显示它们没有触发。我在 20 中重新启用了该click_to_move选项，它可以移动手柄。但这显然不是最理想的。

有人有想法吗？您想了解更多信息吗？我应该提交错误报告吗？谢谢！

4

1 回答 1

0

嗯，我觉得很傻。

虽然 IE10 需要更多的 polyfill（这似乎有点奇怪）。Swiper 不再支持 IE9。这里讨论的 IE 的一般问题是twentytwenty-handle失去了被定位的能力。这是通过使用指针事件来解决的。

$(".twentytwenty-handle").on("pointerdown", function() {
    if (mainSwiper.autoplay.running) { mainSwiper.autoplayWasRunning = true; mainSwiper.autoplay.stop(); }
    mainSwiper.allowTouchMove = false;
})
.on("pointerup", function() {
    if (mainSwiper.autoplayWasRunning) { mainSwiper.autoplay.start(); }
    mainSwiper.allowTouchMove = true;
});
于 2018-01-12T21:09:07.537 回答