Javascript 调整浏览器图像重叠时滑动.js

我想在我的Slider应用程序中使用

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

函数设置（）{
//缓存幻灯片
slides=slider.children；
长度=幻灯片长度；
//如果只有一个幻灯片，则循环没有意义
如果（slides.length<2）options.loopPanel=false；
//幻灯片长度校正，减去克隆幻灯片
对于（变量i=0；i位置宽度：（索引<位置宽度：0），0）；
}
}
//在索引前后重新定位元素
if（options.loopPanel&&browser.transitions）{
移动（圆（索引-1），-宽度，0）；
移动（圆（索引+1），宽度为0）；
}
如果（！browser.transitions）slider.style.left=（索引*-宽度）+“px”；
options.container.style.visibility='visible'；
分离事件（）；
附件（）；
}

当我重新调整到全屏时，它会恢复正常。这种情况在移动设备上发生得更快，因为它们的初始屏幕尺寸很小，所以我认为这与图像大小有关，并且在调整大小时某些属性没有正确调整。然而，我在Github上盯着我的代码和源代码看了很长时间，我找不到我做错了什么

更新：

/* 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;
}

将最大宽度：100%添加到图像样式似乎可以解决 重叠，但如果我这样做，我的图像将无法保持纵横比。 更宽的图像会被挤压，这样会丢失纵横比。仍然如此 寻找解决方案

---

如果您的图像重叠，看起来像是从父容器中分离出来的，则可能是图像未设置为响应（根据屏幕宽度调整大小）。尝试将

最大宽度：100%

添加到滑块中的图像中

嘿，埃里克，我认为这是一个不重叠的技巧，但我现在对纵横比有了问题。。在更大的图像上，它们看起来更窄了。不确定在我现有的CSS中应该采用哪一个值？试着将你的图像也设置为具有

height:auto

如果您查看上面我的CSS文件，它们的

高度

和

宽度

已经位于

自动

。我以前也有过。嗯。当我与CSS问题发生冲突时，我很沮丧。你设置

minheight:400px

将其删除，然后看看你的图像是否保持其纵横比。在这种情况下，会的，但是一个bomer。。因为如果我这样做，我会失去较小图像的“延伸”。因此，我们的想法是，div中的所有图像都会拉伸/挤压以适合div容器。也许我最初的CSS对我的目标来说都写得不好？