Swipe.js при изменении размера изображения браузера перекрываются - PullRequest
Новая
       31

Swipe.js при изменении размера изображения браузера перекрываются

0 голосов
/ 15 октября 2018

Я хотел использовать Swipe.js для своего приложения Slider, но я обнаружил, что при изменении размера окна браузера изображения будут перекрываться.Пожалуйста, проверьте скриншот ниже, чтобы лучше понять, что я имею в виду:

enter image description here

Этот эффект появляется, когда предыдущее изображение было больше, чем текущее.Я не могу понять, что не так.

Вот мой 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, и я не могу найти, что я делаю неправильно.

ОБНОВЛЕНИЕ:

Добавление max-width: 100% к стилю изображения, похоже, устраняет проблему наложения, но если я это сделаю, мои изображения не сохранят пропорции.Более широкие изображения сжимаются и таким образом теряют пропорции.Так что все еще ищем решение.

1 Ответ

0 голосов
/ 15 октября 2018

Если ваши изображения накладываются и выглядят так, как будто они вырываются из родительского контейнера, возможно, изображения не настроены на адаптивность (измените размер в соответствии с шириной экрана).Попробуйте добавить max-width: 100% к вашим изображениям в слайдере.

...