如何实现带缩小效果的左右滑动背景轮播？求替代Slick的JS库

你要复刻的滑块效果是平滑左右过渡+切换时的缩小动画，Slick默认的过渡机制较难直接实现这类复合动画，以下几个JS库更适合实现这类效果：

1. Swiper.js #

功能全面且灵活，支持自定义过渡动画。可以通过配置effect参数，结合自定义CSS类或内置动画回调，轻松实现当前滑块缩小滑出、新滑块平滑滑入的组合效果。它的文档丰富，社区资源多，适配移动端和桌面端场景。

2. Glide.js #

轻量级模块化滑块库，核心体积小，专注于简洁的API与自定义能力。通过修改animation配置项，或为滑块元素添加自定义CSS过渡动画，就能实现所需的缩小+滑动效果，适合不需要过多冗余功能的项目。

3. Flickity #

主打触摸友好的滑块库，动画流畅度表现优异。支持通过自定义CSS控制滑块切换时的状态变化，利用其提供的select事件或transition选项，可精准实现滑块缩小滑出的动画逻辑，尤其适合注重交互手感的场景。

另外补充：其实Slick也可以尝试自定义实现，比如给当前激活的滑块添加缩小的CSS动画，同时修改滑动过渡的timing函数，但需要额外编写较多自定义逻辑，效率不如上述库直接。

你当前的Slick实现代码 #

jQuery(document).ready(function($) {
  jQuery('.demo').slick({
    arrows: 1,
    dots: 1,
    cssEase: "ease-out",
    autoplay: true
  });
});

body {
  margin: 0;
}

.slick-slide {
  img {
    max-width: 100%;
    height: 100vh;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="slider demo">
    <div><img src="https://images.unsplash.com/photo-1674240568812-d7481f3699a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80" alt=""></div>
    <div><img src="https://images.unsplash.com/photo-1573996987033-47fd3a4ca35e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt=""></div>
  </div>

</body>

</html>

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