Swipe.js when resizing browser images overlap

Question

I wanted to use Swipe.js for my Slider App, but I found out that when I resize the browser window, the images will overlap. Please check the below screenshot, to better picture what I mean:

This effect seems to appear when previous image was bigger than the current one. I cannot figure out what is wrong.

Here is my 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;
}

And this is the functions that is called when resize event occurs:

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

When I resize back to full screen it goes back to normal. Happens sooner on mobile devices, because their inital screen size is small, so I assume it has to do something with the image sizes and some properties are not properly adjusted when resizing. However, I am starring at my code and the source code on Github for soo long and I cannot find what I am doing wrong.

UPDATE:

Adding max-width: 100% to image style seems to fix issue of overlapping, but if I do that, my images won't preserve aspect ratio. Wider images are squished and lose aspect ratio this way. So still looking for solution.

score 0 · Answer 1 · answered Oct 15 '18 at 19:35

0

If your images are overlapping and look like they're breaking out of their parent container it could be that the images are not set to be responsive (resize according to screen width). Try adding max-width: 100% to your images in the slider.

answered Oct 15 '18 at 19:35

Eric

66
5

Hey Eric, I think this does the trick of not overlapping, but I am getting now issue with Aspect Ratio.. on bigger images they look now squished narrower. Not sure which value to perhaps adapt in my existing CSS? – AndroidDev101 Oct 15 '18 at 19:41
1

Try setting your images to also have ```height: auto;``` – Eric Oct 15 '18 at 19:44
They have both `height` and `width` already at `auto`, if you look at my CSS file above. I had that before too. Hm. So frustrating when I clash with CSS issues.. – AndroidDev101 Oct 15 '18 at 19:46
You set ```min-height: 400px``` Remove that, and see if your images keep their aspect ratio. – Eric Oct 15 '18 at 19:49
In that case that will, but a bomer.. because if I do that, I lose the 'stretch' of smaller images. So the idea is that all the images within div stretch / squish to fit the div container. Maybe even my initial CSS is badly written for my goal? – AndroidDev101 Oct 15 '18 at 19:53

Swipe.js when resizing browser images overlap

1 Answers1