Giter Club home page Giter Club logo

Comments (5)

davehax avatar davehax commented on August 20, 2024

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

from lory.

nstanard avatar nstanard commented on August 20, 2024

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

from lory.

riotcku avatar riotcku commented on August 20, 2024

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

from lory.

dduskim avatar dduskim commented on August 20, 2024

👍

from lory.

rekateka avatar rekateka commented on August 20, 2024

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.

from lory.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.