如何获取Slick Carousel含断点的当前slidesToShow设置？

嘿，刚好对Slick的这个API很熟悉，给你捋清楚怎么实现——其实Slick本身就提供了直接访问实例设置的方法，完全不用折腾DOM属性，还能完美处理断点带来的属性变化。

核心方法：getSlick() #

首先，你需要通过getSlick()方法获取当前的Slick实例对象，这个对象里包含了所有初始化设置和当前生效的动态设置：

const slickInstance = $('#slickCarouselId').slick('getSlick');

两种场景的属性获取 #

根据你要的是初始设置值还是当前生效值（断点触发后会变化），分两种情况处理：

1. 获取初始设置的属性值

如果想拿到你初始化时写的原始配置（不受断点影响），直接访问实例的options属性：

// 获取初始的slidesToShow
const initialSlidesToShow = $('#slickCarouselId').slick('getSlick').options.slidesToShow;

// 其他属性同理，比如初始的autoplay设置
const initialAutoplay = $('#slickCarouselId').slick('getSlick').options.autoplay;

2. 获取当前生效的属性值（含断点覆盖）

这是你需求里最关键的部分——当断点触发后，Slick会自动切换到对应断点的设置，此时要拿当前实际生效的值，需要访问currentOptions属性：

// 获取当前实际显示的slidesToShow（断点生效后会自动更新）
const currentSlidesToShow = $('#slickCarouselId').slick('getSlick').currentOptions.slidesToShow;

// 比如断点设置了dots为false，这里就能拿到当前的dots状态
const currentDotsStatus = $('#slickCarouselId').slick('getSlick').currentOptions.dots;

封装成你想要的“属性式”调用 #

如果你觉得每次写.slick('getSlick').xxx太繁琐，可以自己封装一个jQuery扩展方法，实现类似$('#id').slickOption('propName')的简洁调用：

// 扩展jQuery方法，方便快速获取Slick属性
$.fn.slickOption = function(propName) {
  const slickInstance = this.slick('getSlick');
  // 先检查实例是否存在（避免未初始化的情况）
  if (!slickInstance) return undefined;
  // 优先返回当前生效的设置，没有则返回初始设置
  return slickInstance.currentOptions[propName] || slickInstance.options[propName];
};

之后你就可以像这样用了：

// 获取当前生效的slidesToShow
const slides = $('#slickCarouselId').slickOption('slidesToShow');

// 获取初始的speed设置
const speed = $('#slickCarouselId').slickOption('speed');

注意事项 #

• 确保Slick已经完成初始化：如果在页面加载完成前调用，getSlick()会返回null，建议在Slick的init事件里操作，或者添加实例存在的判断。
• 所有Slick支持的配置属性都可以通过这种方式获取，不限于slidesToShow。

内容的提问来源于stack exchange，提问作者menepet