search

ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.
MIT License
5.26k stars 785 forks source link

2.9.0 breaks responsiveness when multiple items are shown. #361

Open webpro-solutions opened 5 years ago

webpro-solutions commented 5 years ago

Issue description: I recently updated from 2.8.8 to 2.9.0 and now our responsive sliders with multiple items showing with lazy loading (which worked in 2.8.8) are having issues. When it hits the breakpoint, it adjusts to the proper size, however, it is leaving empty spaces where images should be (lazy loaded images that haven't loaded and don't ever load). There was even some overlapping of images (the dynamic positioning was off).

Demo link/slider setting: I don't have a public demo but here are the settings being used: const theMultiCarousel = tns({ items: 1, responsive: { 480: { items: 2 }, 768: { items: 3 }, 991: { items: 4 } }, container: this.targetElement, nav: false, slideBy: '1', gutter: 15, autoplay: true, controlsText: ['', ''], autoplayButtonOutput: false, mouseDrag: true, lazyload: true });

Tiny-slider version: 2.9.0 and 2.9.1 Browser name && version: Chrome: Version 71.0.3578.98 | Firefox: 64.0 | Safari: 12.0.2 | IE 11 OS name && version: MacOS High Sierra V 10.13.6

torsteinringnes commented 5 years ago

Can confirm, I have the exact same issue.

scsskid commented 5 years ago

confirmed, rolled back, 2.8.8 works, didnt test 2.8.9 (if released)

fatcrobat commented 5 years ago

Same here, rolled back to 2.8.8.

scottleblang commented 5 years ago

Created a pull request for this issue. Changing line 1426 in src/tiny-slider.js from: if (itemsChanged || !carousel) { updateGallerySlidePositions(); } to if (itemsChanged && !carousel) { updateGallerySlidePositions(); }