on resize lory bug

[jinkwon]

Hi lory.
First of all, Thanks good lib.
I found some issue in lory.

I moved to 3rd panel, and then I tried to resize window.
And bug appeared in here, lory panel go to 1st panel.

So, I tried such as code.
But I think it should be default.
Can you give me some advice?

Thanks for your effort.

// persist panel index
elFlick.addEventListener('on.lory.resize', (e) => {
    this.flicking.slideTo(this.currentFlickingIndex);
});

[davehax]

Hi Jinkwon,

Recently for a project i modified the distributed "Lory.js" file to maintain the current slide index on window resize. Unfortunately i'm unsure on how to contribute this to the source files.
Here are the relevant functions:

function reset(persistIndex) {
    var _options5 = options;
    var infinite = _options5.infinite;
    var ease = persistIndex === true ? null : _options5.ease;
    var rewindSpeed = persistIndex === true ? 0 : _options5.rewindSpeed;

    slidesWidth = slideContainer.getBoundingClientRect().width || slideContainer.offsetWidth;
    frameWidth = frame.getBoundingClientRect().width || frame.offsetWidth;

    if (frameWidth === slidesWidth) {
        slidesWidth = slides.reduce(function (previousValue, slide) {
            return previousValue + slide.getBoundingClientRect().width || slide.offsetWidth;
        }, 0);
    }

    if (persistIndex !== true) {
        index = 0;
    }

    if (infinite) {
        translate(slides[index + infinite].offsetLeft * -1, 0, null);

        index = index + infinite;
        position.x = slides[index].offsetLeft * -1;
    } else {
        translate(slides[index].offsetLeft * -1, rewindSpeed, ease);
        position.x = slides[index].offsetLeft * -1;
    }
}

function onResize(event) {
    reset(true);

    dispatchSliderEvent('on', 'resize', {
        event: event
    });
}

[nstanard]

I'll work on this if it's alright!

[riotcku]

I made an option to change this behavior in this PR: #312

[dduskim]

👍

[rekateka]

I only just noticed this behaviour, not by actually, well, resizing the browser window but instead by scrolling/swiping up and down a page in Safari on an iPad, causing the address bar (and subsequently the window) to resize. That might be a little be confusing for the user so I have a not-so-elegant solution for now:

const carousel = document.querySelectorAll('.carousel')[0];
let activeSlide = 0;

const loryInstance = lory(carousel, {
  infinite: 1,
  enableMouseEvents: true
});

carousel.addEventListener('after.lory.slide', () => {
  activeSlide = loryInstance.returnIndex();
});

carousel.addEventListener('on.lory.resize', () => {
   loryInstance.slideTo(activeSlide); //the default slide duration makes the transition back to the active slide very obvious
});

Ideally it'd be great if this behaviour could be disabled altogether or trigger the reset only when the browser width changes, not both.