如何在 ul li 元素上添加光滑的滑块

Question

我想在 ul 元素上添加光滑的滑块，但不知道如何做到这一点。下面是我的html

jQuery(".post-list-new").slick({
  dots: false,
  infinite: true,
  speed: 300,
  slidesToShow: 2,
  slidesToScroll: 2,
  responsive: [{
      breakpoint: 1280,
      settings: {
        slidesToShow: 2,
        slidesToScroll:
      }
    },
    {
      breakpoint: 768,
      settings: "unslick"
    }
  ]
});

<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" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<ul class="post-list-new clearfix">
  <li class="post-holder-new post-holder-new-17">
    <div clas="my_image">
      img 1 here
    </div>
  </li>
  <li class="post-holder-new post-holder-new-17">
    <div clas="my_image">
      img 1 here
    </div>
  </li>
  <li class="post-holder-new post-holder-new-17">
    <div clas="my_image">
      img 1 here
    </div>
  </li>
</ul>

谁知道这有什么问题，请告诉我

Answer 1

大家好，可以吗

我正在使用 Slick 滑块

我有 5 个帖子，每行显示 3 个帖子，但我希望下一张幻灯片只有 2 个帖子

喜欢：发布 1、2、3，在第一张幻灯片中，然后下一张幻灯片仅显示 4、5。

 <script>
$('.slider').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 3,
    responsive: [
        {
        breakpoint: 1024,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
        }
        },
        {
        breakpoint: 600,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 2
        }
        },
        {
        breakpoint: 480,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1
        }
        }
    ]
});

Answer 2

ul li 元素上的滑动滑块代码

button {
  background: transparent;
  border: 0;
  display:none;
  font-size: 0;
}
ul.slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.slick-dots li {
  color: black;
  padding: 10px;
  cursor: pointer;
  font-size: 30px;
}
ul.slick-dots li.slick-active {
  color: red;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="slide_main">
<ul class="Pre_slide">
  <li class="post-holder-new post-holder-new-17">
    <div clas="my_image">
      img 1 here
    </div>
  </li>
  <li class="post-holder-new post-holder-new-17">
    <div clas="my_image">
      img 1 here
    </div>
  </li>
  <li class="post-holder-new post-holder-new-17">
    <div clas="my_image">
      img 1 here
    </div>
  </li>
  <li class="post-holder-new post-holder-new-17">
    <div clas="my_image">
      img 1 here
    </div>
  </li>
</ul>
</div>

<script>
    $('.Pre_slide').slick({
      dots: true,
      infinite: true,
      arrows:true,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 1,
      nextArrow:$('.slider-next'),
      prevArrow:$('.slider-prev'),
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true

          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
  </script>