在Swiper滑块中调整大小

如何解决在Swiper滑块中调整大小

我有一个div，允许用户在滑动滑块中调整大小。现在，它仅在旋转滑块之前有效。这是第一项，因此当我重新加载页面时，它可以正常工作，但是如果我旋转滑块，它会断裂，并且不允许用户再次调整元素的大小。

这是调整大小的代码：

// # Some special stuff to resize along the y on the small sizes
var maxY = 711;
var preResizeOnSmall = false;

// # X resize
var dragBarX = $('#dragbar-x'); // get the drag bar on the right
var dragging = false; // used to track whether we are currently dragging either bar out

var offsetX = 0; // set a default offset for where the bar is on the x handle
var startWidthX; // a variable to offset the size based on the current

dragBarX.on('mousedown',(e) => { // when the x handle is clicked
    e.preventDefault()

    offsetX = e.pageX; // get the postion of the handle and set that as the offset
    startWidthX = parseFloat($('.responsive .card').css('width')) // the current width so we can modify that instead of completely reseting the width

    $('html').css("cursor","w-resize") // make the cursor everywhere the resize arrow

    dragging = true;

    $(document).mousemove(e => { // add a mouse move listener
        let result = e.pageX - offsetX + startWidthX; // get the result. The distance from the current mouse pos (e.pageX) and the handdle start pos (offsetX) and then use that to modify the existing width
        if(result >= 390 && result <= 889) // if the result is within the threshold
            $('.responsive .card').css('width',result + "px") // resize

        if(result > 573) { // if it's within the large threshold
            $('.responsive .card').removeClass('sm-resp md-resp'); // remove other stylings
            $('.responsive .card').addClass('lg-resp'); // give it the large styling
        } else if (result > 431) {
            if($('.responsive .card').hasClass('sm-resp') && preResizeOnSmall){ // if the last size was small. and we resized
                // make 200 pixels smaller
                let h = parseFloat($('.responsive .card').css('height'));
                let r = h - 200
                $('.responsive .card').css('height',r + "px");

                preResizeOnSmall = false;
            }

            $('.responsive .card').removeClass('sm-resp lg-resp'); // remove other styles
            $('.responsive .card').addClass('md-resp'); // give the medium stylings
        } else {
            if($('.responsive .card').hasClass('lg-resp') || $('.responsive .card').hasClass('md-resp')) { // if was last large or medium
                $('.responsive .card').removeClass('lg-resp md-resp'); // remove those stylings
                $('.responsive .card').addClass('sm-resp'); // add small styles

                let h = parseFloat($('.responsive .card').css('height'));

                if(h < 556) { // if we're too close to top
                    preResizeOnSmall = h;
                    // move down 200 pixels
                    let r = h + 200
                    $('.responsive .card').css('height',r + "px");
                } else {
                    preResizeOnSmall = false; // if we don't need to resize set the pre flag to false and not a value
                }
            }
        }
    })
})

// when we stop dragging
$(document).mouseup((e) => {

    if(dragging) { // if we were dragging
        $(document).unbind('mousemove'); // remove the move listener
        $('html').css("cursor",""); // remove cursor
    }
    
    // no matter what make dragging false
    dragging = false
})

这是swiper实例：

 let swiper = new Swiper('.swiper-container',{
    loop: true,noSwiping: true,noSwipingClass: 'no-swiping',navigation: {
        nextEl: '.next',prevEl: '.prev',},});

我调整大小的元素具有no-swiping类。 有任何解决办法吗？

编辑： 我进行了更多测试，并且在调整所有幻灯片之后，重新调整大小的拖动才停止工作，并且按照无限循环机制循环回到开始