我如何能有响应的页面,通过使用slick插件的滑动图像使用.your-class和多项目类的手机,平板电脑。

我想创建一个网页,在手机屏幕上显示一张图片,但我可以滑动到下一张和上一张图片。然后在平板电脑屏幕上有2张图片,可以滑动到下一张和上一张,在媒体查询中调用这些图片,每张图片都能正常工作,但我想把它们都放在不同的屏幕尺寸上。

// showing single item 
    $('.your-class').slick();

// showing tablet
  $('.multiple-items').slick({
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 2
    });

// SHOWING 4 COLUMN desktop
    $('.multiple-items4').slick({
  infinite: true,
  slidesToShow: 4,
  slidesToScroll: 4
});

解决方案:

你需要给 断点 为响应速度。

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

给TA打赏
共{{data.count}}人
人已打赏
未分类

翩翩起舞 :- 用相机拍照

2022-9-9 2:12:19

未分类

如何用typecript发送firebase云消息?

2022-9-9 2:12:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索