Question

我有一个在自由模式下使用swiper js的滑块，该滑块可能最多包含100张幻灯片，当用户滑动时，我们需要它们才能在触摸或单击时停止滑块。

Answer 1

是的，我使用了此功能

function stopCarouselOnTouch() {
    var slider_wrap = $('.slider-wrap');
    var translation = getTransform(slider_wrap);


    var translationX = translation[0];
    var translationY = translation[1];
    var absX = Math.abs(translationX);
    var absY = Math.abs(translationY);

    // stops the carousel at the current value
    $('.swiper-wrapper').css({'transform': 'translate3d(' + translationX + 'px , ' + translationY + 'px, 0px)'});
    $('.swiper-wrapper').css('webkit-transition-duration', '0s');

    // finds css translation values
    function getTransform(el) {

        var transform = window.getComputedStyle(document.getElementById('slider-wrap'), null).getPropertyValue('transform');
        var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*)), -{0,1}\d+\.?\d*\)|\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))\))/);

        var result = [0,0,0];
        if(results){
          if(results[1] == '3d'){
            result = results.slice(2,5);
          } else {
            results.push(0);
            result = results.slice(5, 9); // returns the [X,Y,Z,1] value;
          }

        };
        return result;
    }
}

然后我在里面叫它

on: {
 touchStart: function() {

  stopCarouselOnTouch();

 },
}

Swiper JS，如何在自由模式下停止触摸式包装器？

1 个答案: