CODEWITHSUNDEEP
javascriptjqueryinternet-explorerswiper.jstwentytwenty
Vagari
Vagari

Reputation: 458

twentywenty-handle cannot be selected in IE when part of swiper slide

I was unable to create a codepen to demonstrate this issue (too many dependencies to sort out) so hopefully the description will be enough.

I successfully combined swiper.js with twentytwenty for a project. In all modern browsers, including Microsoft Edge, both pieces work together. 

<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>

This is all with 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.
});

And with some jQuery to disable moving from slide to slide when selecting the "handle" you don't get a parallax effect (there are more parts for things like touch devices but that doesn't apply here). 

$(".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;
});

I thought things were all set. And went to move on to testing when I discovered that the jquery.event.move script that twentytwenty needs has polyfill requirements for IE. Once those were sorted out everything loaded in IE. But when I clicked on the handle, nothing happened in regard to twentytwenty. The whole slide moved, and adding console.log inside the events showed they weren't triggering. I re-enabled the click_to_move option in twentytwenty and that works for moving the handle around. But that's obviously suboptimal.

Does anyone have any thoughts? Would you like more info? Should I be filing bug reports? Thanks!

Upvotes: 0

Views: 496

Answers (1)

Vagari
Vagari

Reputation: 458

Well, I feel silly.

While IE10 needs more polyfills (which seemed a bit odd). And IE9 is not supported anymore in Swiper. The general issue with IE discussed here is that the twentytwenty-handle lost its ability to be targeted. That is solved by using pointer events. 

$(".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;
});

Upvotes: 0

Related Questions