ganlanyuan / tiny-slider

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

Fixedwidth just for mobile #516

Open annapoth opened 4 years ago

annapoth commented 4 years ago

Issue description:

Demo link/slider setting:

Tiny-slider version:
Browser name && version:
OS name && version:

annapoth commented 4 years ago

Hi,

I can't use the fixedWidth property just in the responsive settings. The fixedWidth is working fine on mobile if I add it to the responsive settings, but the desktop version is not working anymore. On desktop the fixed width is also set and 3 items are shown instead of 2.

 var slider = tns({
        container: 'sliderd',
        items: 2,
        mouseDrag: true,
        nav: false,
        edgePadding:0,
        slideBy: 'page',
        speed: 400,
        loop: false,
        controlsContainer: "controlsContainer",
        autoplay: false,
        responsive: {
          300: {
            items: 1,
            edgePadding: 10,
            fixedWidth: 340
          },
          500: {
            items:2,
            edgePadding: 10
          },
          600: {
            items: 2,
            edgePadding:0
          }
        }

      });

Can anyone help here?

ianhobbs commented 4 years ago

If i'm reading the docs right, You'll need to add "fixedWidth: false" to the 500 breakpoint. Currently 500 and 600 inherit the 300 fixedWidth settings.

faivalete commented 4 years ago

hi @ianhobbs, if I add 'fixedWidth: false' to any of the response keys, I get a typescript compilation error:

 defaultOptions = {
    nav: false,
    gutter: 5,
    responsive: {
      320: {
        items: 1,
        fixedWidth: 320
      },
      599: {
        fixedWidth: false,
      }
    }
  };

this will throw: Type 'boolean' is not assignable to type 'number | false'.