在javascript中设置响应断点

Setting responsive breakpoint in javascript

本文关键字：响应 断点 设置 javascript      更新时间：2023-09-26

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

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

我想要的是

1024x768和768x1024: slideToShow:6

800x600和600x800: slideToShow: 3

480 x320 slideToShow: 2

320 x480 slideToShow: 1

如果我设置{断点:768，设置:{slidesoshow: 6}}当我设置为800x600时，它会显示6张幻灯片，但我只需要在800x600时显示3张幻灯片。

有可能的解决方案吗?谢谢。

文档说"断点:启用给定屏幕宽度的设置集"。因为所有你想要的分辨率都有不同的宽度，所以应该可以像这样区分它们:

.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 }
        }
    ]
});
相关文章：