You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何使用jQuery在移动端设置滑块初始显示元素?slick滑块initialSlide设置无效求助

Troubleshooting Slick Slider's initialSlide Not Working on Mobile

Hey there! Let's figure out why your initialSlide: 2 setting isn't making your slider start on the third element as expected.

First, a quick recap of your setup: you're using Slick with mobileFirst: true, aiming to have the slider default to the third slide (index 2) on mobile, while disabling the slider entirely on screens larger than 1023px. Here are the most likely fixes to get this working:

1. Initialize the Slider After the DOM is Fully Loaded

If your code runs before the slider's HTML slides are rendered, Slick might not recognize all the slides, causing initialSlide to fail. Wrap your initialization code in $(document).ready() to ensure it runs only after the page is ready:

$(document).ready(function() {
  jQuery('.js-a1-wlan-slider').slick({
    infinite: false,
    slidesToShow: 1,
    centerMode: true,
    centerPadding: "26px",
    focusOnSelect: false,
    arrows: true,
    prevArrow: '<a class="a1-wlan-slider-boxes-prev deactive"></a>',
    nextArrow: '<a class="a1-wlan-slider-boxes-next"></a>',
    initialSlide: 2,
    dots: true,
    mobileFirst: true,
    responsive: [
      {
        breakpoint: 1023,
        settings: "unslick"
      }
    ]
  });
});

2. Confirm You Have Enough Slides

Slick ignores initialSlide if the index you specify doesn't exist. Double-check that your .js-a1-wlan-slider container has at least 3 slides (since Slick uses zero-based indexing: 0 = first, 1 = second, 2 = third). If there are only 1 or 2 slides, Slick will automatically default to the last existing slide.

3. Test in the Correct Viewport

Your responsive setting destroys the slider on screens wider than 1023px. Make sure you're testing on a mobile viewport (width < 1023px) — the initialSlide setting only applies where the slider is active.

4. Check for Conflicting Code

If you have other scripts interacting with the slider (like slick('slickGoTo', 0) or auto-play functions), they might be overriding your initialSlide setting. Scan your codebase for any other calls to Slick methods that could reset the slide position after initialization.

Give these steps a shot — they should get your slider starting on the third element as you intended!

内容的提问来源于stack exchange,提问作者hilmi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.30 06:17:30