Comments (5)
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.
I'll work on this if it's alright!
from lory.
I made an option to change this behavior in this PR: #312
from lory.
👍
from lory.
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)
- initialIndex without animation HOT 2
- TypeError: P is undefined when using https://cdnjs.cloudflare.com/ajax/libs/lory.js/2.5.1/lory.min.js HOT 2
- iPhone X — Index Issue HOT 1
- Desktop: Prevent ghost images from dragging on mouseMove (desktop) HOT 3
- Access Lory Instance in EventHandler when creating multiple instances? HOT 1
- On TouchScrolling, snap to next visible slide HOT 3
- BUG: Browser history on drag HOT 4
- .
- How to Set up Automatic Scroll HOT 1
- Improve accessibility HOT 2
- Change the transition direction
- Change transition direction
- Need to add slide specific text content to image in slider HOT 5
- Sliders won't work when is cache deleted HOT 1
- How to add a sound component in grapesjs
- How use jssor.slider.js in grapesjs HOT 1
- ios devices - While swiping right or left page scrolls vertically HOT 1
- Using the API methods in Vanilla JS HOT 2
- Next/Prev "buttons" don't work if above the slider element in the DOM HOT 1
- number of visible slide I suppose expect visible 3 but always show 4 #sadLife NOT WORKING!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lory.