Open pierrebonny opened 5 years ago
I have the same problem! I found a crutch that apparently allows you to update the slider when you change your browser window. Here's my config:
{
container: '.js-works-slider',
items: 8,
autoWidth: true,
nav: true,
controls: true,
navContainer: '.js-works-slider-dots',
prevButton: '.js-works-slider-prev',
nextButton: '.js-works-slider-next',
lazyload: true,
lazyloadSelector: '.js-tns-lazy',
mouseDrag: true,
preventScrollOnTouch: 'auto',
responsive: {
2: {
items: 2,
},
569: {
items: 4,
fixedWidth: null,
},
769: {
items: 6,
fixedWidth: false,
},
1025: {
items: 8,
fixedWidth: null,
},
},
}
On each breakpoint change I change the value of the option fixedWidth
(null
and false
in turn), so the script updates the size of each slide.
Issue description: I would like to use breakpoints to show the number of slides that can fit in my screen. I don't want the slides to resize, just to appear and disappear on resize. For example if I have 4 slides of width 318px and screen dowsizes to less than 4 x 318px I would like the slider to hide the last slide in order to show only 3 slides. Currently when I put a fixed Width, all breakpoints are disabled and responsivity doesn't work. Is it a bug ? How can I mange to do it ? Thanks
Demo link/slider setting:
loop: false, slideBy: 1, nav: false, autoplay: false, speed: 400, autoplayButtonOutput: false, mouseDrag: true, lazyload: false, gutter: 30, fixedWidth: 318, responsive: { 768: {items: 1} 1116: {items: 1} 1464: {items: 2} 1812: {items: 3} 2160: {items: 3} 2508: {items: 3} } Tiny-slider version: latest Browser name && version: chrome 73 OS name && version: windows 10