如何制作滑块答案

【问题标题】：How to make a slider如何制作滑块
【发布时间】：2021-04-23 14:31:33
【问题描述】：

如何制作将项目插入到中心的包装器的滑块，并且中心项目具有不同的大小。现在我正在尝试使用光滑的滑块来实现此功能，但欢迎使用任何滑块。

【问题讨论】：

Google for javascript carousel
谢谢你，但不是我真正需要的yyyy
@Olian04 等你说实话，现在才知道真相
希望您至少尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
Have you looked here?

【解决方案1】：

您好，您可以使用 Slick 制作此滑块

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

    <script>
      $(function() {
        $(".center").slick({
          centerMode: true,
          centerPadding: "60px",
          slidesToShow: 4,
          arrows: true,
          responsive: [
            {
              breakpoint: 768,
              settings: {
                arrows: false,
                centerMode: true,
                centerPadding: "40px",
                slidesToShow: 3
              }
            },
            {
              breakpoint: 480,
              settings: {
                arrows: false,
                centerMode: true,
                centerPadding: "40px",
                slidesToShow: 1
              }
            }
          ]
        });
      });
    </script>

@import "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css";  
  .slick-list {
        padding: 70px 60px !important;
      }
      .item-slide img {
        width: 100px;
      
      }

      .item-slide img {
        padding: 0 0px;
        transition: 0.2s transform linear;
      }

      .slick-center img {
        transform: scale(1.3);
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center">
      <div class="item-slide">
        <img src="https://picsum.photos/300/300" />
      </div>

      <div class="item-slide">
        <img src="https://picsum.photos/300/300" />
      </div>

      <div class="item-slide">
        <img src="https://picsum.photos/300/300" />
      </div>

      <div class="item-slide">
        <img src="https://picsum.photos/300/300" />
      </div>

      <div class="item-slide">
        <img src="https://picsum.photos/300/300" />
      </div>

      <div class="item-slide">
        <img src="https://picsum.photos/300/300" />
      </div>

      <div class="item-slide">
        <img src="https://picsum.photos/300/300" />
      </div>

      <div class="item-slide">
        <img src="https://picsum.photos/300/300" />
      </div>
    </div>

【讨论】：