Question

我想在我的Slider App中使用Swipe.js，但是我发现，当我调整浏览器窗口的大小时，图像会重叠。请检查以下屏幕截图，以更好地理解我的意思：

当上一张图像大于当前图像时，似乎会出现此效果。我不知道怎么了。

这是我的CSS：

/* GALLERY CSS*/ 
.slider {
  overflow: hidden;
  /* visibility: hidden; */
  position: relative;
 }

.slider-wrap {
  overflow: hidden;
  position: relative;
 }

.slider-wrap > div {
  float: left;
  width: 100%;
  position: relative;
 }

#image {
  display: block;
  height: auto; 
  width: auto; 
  min-height: 400px;
  max-height: 400px;
  display: block;
  margin: 0 auto;
}

这是发生调整大小事件时调用的函数：

function setup() {
    // cache slides
    slides = slider.children;
    length = slides.length;



   // If there is only 1 slide, looping does not make sense
    if( slides.length < 2 ) options.loopPanel = false;

    // slides length correction, minus cloned slides
    for (var i = 0; i < slides.length; i++) {
        if (slides[i].getAttribute('data-cloned')) length--;
    }


    // special case if two slides
    if (browser.transitions && options.loopPanel && slides.length < 3) {
        slider.appendChild(slides[0].cloneNode(true));
        slider.appendChild(slides[1].cloneNode(true));           

        slides = slider.children;
    }

    // create an array to store current positions of each slide
    slidePos = new Array(slides.length);

    // determine width of each slide
    width = options.container.getBoundingClientRect().width || options.container.offsetWidth;

    slider.style.width = (slides.length * width * 2) + 'px';

    // stack elements
    var pos = slides.length;
    while(pos--) {
        var slide = slides[pos];
        slide.style.width = width + 'px';
        slide.setAttribute('data-index', pos);

        if ( browser.transitions ) {
            slide.style.left = (pos * -width) + 'px';
            move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
        }
    }

    // reposition elements before and after index
    if ( options.loopPanel && browser.transitions) {
        move(circle(index-1), -width, 0);
        move(circle(index+1), width, 0);
    }

    if (!browser.transitions)   slider.style.left = (index * -width) + 'px';        

    options.container.style.visibility = 'visible';

    detachEvents();
    attachEvents();
    }

当我将尺寸调整回全屏时，它又恢复正常。由于移动设备的初始屏幕尺寸很小，因此会在移动设备上更快地发生，因此我认为它必须处理图像尺寸并且某些属性在调整大小时无法正确调整。但是，我在Github上盯着自己的代码和源代码的时间太长了，我找不到我做错的事情。

更新：

为图片样式添加最大宽度：100％似乎可以解决以下问题：重叠，但如果这样做，我的图像将不会保留宽高比。压缩较宽的图像并以这种方式失去纵横比。所以还是寻找解决方案。

Answer 1

如果您的图像重叠并且看起来好像正在脱离其父容器，则可能是图像未设置为响应式（根据屏幕宽度调整大小）。尝试将max-width: 100%添加到滑块中的图像。

调整浏览器图像大小时的Swipe.js重叠

1 个答案: