自定义宽度后Slick Slider滑块切换出现卡顿抖动问题求助

你这滑块卡顿的问题，核心是JS直接修改DOM样式触发频繁重排重绘，加上老旧版本Slick的布局逻辑冲突，还有过渡动画的应用范围不对导致的。按以下步骤修改即可解决：

解决步骤 #

• 升级Slick版本：你当前用的1.3.11是非常老旧的版本，存在不少布局和动画bug，换成最新稳定版（比如1.8.1）
• 修正视口宽度获取：别用screen.width（取的是屏幕物理分辨率），改用$(window).width()获取浏览器实际视口宽度
• 优化CSS过渡与硬件加速：把过渡效果应用到所有slick-slide，同时添加硬件加速属性减少卡顿
• 用CSS类代替JS硬写样式：避免在setPosition里直接设置width/min-width，改用动态类控制，减少DOM操作
• 关闭不必要的自适应高度：如果不需要滑块高度自适应，关掉adaptiveHeight，减少额外重排

修改后的完整代码 #

HTML部分 #

<html>
<head>
    <title>Slider Fix Demo</title>
    <!-- 引入最新Slick官方CSS文件 -->
    <link rel="stylesheet" type="text/css" href="slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick-theme.css"/>
    <style>
        /* 全局样式重置与滑块基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .home-slider {
            width: 100%;
            overflow: hidden;
        }
        /* 所有滑块添加过渡与硬件加速 */
        .home-slider .slick-slide {
            transition: width 0.6s ease-in-out;
            will-change: width;
            transform: translateZ(0); /* 触发GPU硬件加速，减少卡顿 */
            min-width: 0; /* 重置默认min-width，避免冲突 */
        }
        /* 动态类控制滑块宽度 */
        .home-slider .slick-slide.active-slide {
            width: 70% !important;
        }
        .home-slider .slick-slide.current-slide {
            width: 30% !important;
        }
    </style>
</head>
<body>
    <div class="home-slider">
        <div><img src="http://yesofcorsa.com/wp-content/uploads/2018/03/Insects-In-The-Rain-Best-Wallpaper.jpg" alt="image1"></div>
        <div><img src="http://yesofcorsa.com/wp-content/uploads/2018/03/Insects-In-The-Rain-Best-Wallpaper.jpg" alt="image1"></div>
        <div><img src="http://yesofcorsa.com/wp-content/uploads/2018/03/Insects-In-The-Rain-Best-Wallpaper.jpg" alt="image1"></div>
        <div><img src="http://yesofcorsa.com/wp-content/uploads/2018/03/Insects-In-The-Rain-Best-Wallpaper.jpg" alt="image1"></div>
    </div>

    <!-- 引入最新jQuery和Slick JS文件 -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="slick.min.js"></script>
    <script>
        $(document).ready(function(){       
            $('.home-slider').slick({
                dots: true,
                infinite: true,
                speed: 700,
                autoplay:true,
                autoplaySpeed: 2000,
                arrows:false,
                slidesToShow: 2,
                slidesToScroll: 1,
                adaptiveHeight: false // 关闭自适应高度，减少重排操作
            });

            $('.home-slider').on('setPosition', function (event, slick) {
                // 先移除所有动态类，避免类残留
                $('.home-slider .slick-slide').removeClass('active-slide current-slide');
                // 给活跃滑块添加宽度类
                $('.home-slider .slick-slide.slick-active').addClass('active-slide');
                // 给当前滑块添加宽度类
                $('.home-slider .slick-slide.slick-current').addClass('current-slide');
            });

            // 窗口大小变化时重新初始化滑块（可选，保证响应式正常）
            $(window).on('resize', function(){
                $('.home-slider').slick('resize');
            });
        });
    </script>
</body>
</html>

额外优化提示 #

• 如果需要响应式调整宽度比例，用CSS媒体查询配合即可，比如：

@media (max-width: 768px) {
    .home-slider .slick-slide.active-slide {
        width: 60% !important;
    }
    .home-slider .slick-slide.current-slide {
        width: 40% !important;
    }
}

• 提前缓存DOM选择器，比如const $slider = $('.home-slider')，避免每次事件触发都重新查询DOM，提升性能

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