如何实现类似pickspace.com的网站合作客户自动轮播滑块？

你想在自己的网站上做一个“我们的合作客户”板块，实现类似pickspace.com那种客户标识持续滚动的轮播效果，这里给你一套基于Slick Carousel插件的实现方案，不管是静态网站还是WordPress都能用：

核心思路 #

用Slick Carousel这个轻量级轮播插件，它支持自动滚动、响应式适配，能轻松实现无限循环的logo墙滚动效果，和你参考的示例逻辑一致。

代码实现 #

1. HTML结构 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 引入Slick官方样式（必须加，否则样式异常） -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
    
    <!-- 你的网站自定义样式 -->
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    <main class="main">
        <!-- 客户轮播板块 -->
        <div class="container">
            <h2 class="section__title">我们的合作客户</h2>
            <section class="partners-logos slider">
                <div class="slide"><img src="你的客户logo地址1" alt="客户名称1"></div>
                <div class="slide"><img src="你的客户logo地址2" alt="客户名称2"></div>
                <div class="slide"><img src="你的客户logo地址3" alt="客户名称3"></div>
                <div class="slide"><img src="你的客户logo地址4" alt="客户名称4"></div>
                <div class="slide"><img src="你的客户logo地址5" alt="客户名称5"></div>
                <div class="slide"><img src="你的客户logo地址6" alt="客户名称6"></div>
                <div class="slide"><img src="你的客户logo地址7" alt="客户名称7"></div>
            </section>
        </div>
    </main>

    <!-- 引入依赖脚本 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    
    <!-- 你的网站自定义脚本 -->
    <script src="assets/js/main.js"></script>
</body>
</html>

2. CSS样式 #

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* 轮播项样式 */
.slick-slide {
  margin: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slick-slide img {
  width: 100%;
  max-height: 80px; /* 统一logo高度，避免大小混乱 */
  object-fit: contain; /* 保持logo比例不变形 */
}

/* Slick基础样式优化 */
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

3. JavaScript配置 #

// 客户轮播初始化
$(document).ready(function(){
    $('.partners-logos').slick({
        slidesToShow: 6, // 桌面端一次显示6个logo
        slidesToScroll: 1, // 每次滚动1个
        autoplay: true, // 开启自动滚动
        autoplaySpeed: 1500, // 滚动间隔（毫秒，数值越小滚动越快）
        arrows: false, // 隐藏左右箭头
        dots: false, // 隐藏底部圆点指示器
        pauseOnHover: false, // 鼠标hover时不暂停滚动
        infinite: true, // 开启无限循环滚动
        responsive: [
            {
                breakpoint: 768, // 平板屏幕断点
                settings: {
                    slidesToShow: 4
                }
            }, 
            {
                breakpoint: 520, // 手机屏幕断点
                settings: {
                    slidesToShow: 3
                }
            }
        ]
    });
});

使用步骤 #

1. 把HTML里的logo地址和客户名称替换成你自己的内容
2. 调整CSS里的max-height和间距数值，适配你的网站设计风格
3. 如果是WordPress网站，直接把代码加到自定义HTML模块里，或者通过主题的自定义CSS/JS功能添加
4. 确保jQuery已加载（Slick插件依赖jQuery）

效果预览 #

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