ganlanyuan / tiny-slider

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

fixedWidth breaks responsivity #407

Open pierrebonny opened 5 years ago

pierrebonny commented 5 years ago

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

gvozdb commented 4 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.