在javascript中设置响应断点

Question

我有3种类型的设备，1024 x 768,800 x 600,480 x 320。 这是我的javascript断点

＆＃13;

＆＃13;

    responsive: [
        {breakpoint: 1024, settings: {slidesToShow: 6}},
        {breakpoint: 600, settings: {slidesToShow: 2}},
        {breakpoint: 480, settings: {slidesToShow: 1}}
    ]

＆＃13;

＆＃13;

＆＃13;

我想要的是什么

1024x768和768x1024：slideToShow：6

800x600和600x800：slideToShow：3

480x320 slideToShow：2

320x480 slideToShow：1

如果我设置{断点：768，设置：{slidesToShow：6}} 当我变成800x600时它将显示6张幻灯片，但我只需要在800x600中使用3张幻灯片。

任何可能的解决方案？感谢。

Answer 1

文档说“断点：在给定的屏幕宽度下启用设置集”。由于所有您想要的分辨率都有不同的宽度，因此应该可以区分它们：

.slick({
    slidesToShow: 6, // 1024x768
    responsive: [
        {
          breakpoint: 1024, // 800x600
          settings: { slidesToShow: 3 }
        },
        {
          breakpoint: 800, // 768x1024
          settings: { slidesToShow: 6 }
        },
        {
          breakpoint: 768, // 600x800
          settings: { slidesToShow: 3 }
        },
        {
          breakpoint: 600, // 480x320
          settings: { slidesToShow: 2 }
        },
        {
          breakpoint: 480, // 320x480
          settings: { slidesToShow: 1 }
        }
    ]
});