时间戳

首页 > 解决方案 > 如何通过使用 .your-class 和用于手机、平板电脑的多项目类来滑动图像的 slick 插件来获得响应式页面

jquery - 如何通过使用 .your-class 和用于手机、平板电脑的多项目类来滑动图像的 slick 插件来获得响应式页面

问题描述

我想为手机屏幕创建一个显示一个图像的网页，但我可以滑动到下一个和上一个图像。然后对于平板电脑屏幕，有 2 张图像滑动到下两张图像和 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
});

标签： jquerypluginscarouselslick.js

解决方案

您需要为响应性提供断点。

$('.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
  ]
});

推荐阅读