javascript - 使用 Slick-JS 居中幻灯片

问题描述

刚开始使用 Slick-JS，所以请原谅这个明显的问题。

我如何将我的幻灯片放在这个页面的中心？幻灯片截图

如您所见，幻灯片位于容器的左上角（我在容器周围放置了一个边框以便于查看）。我希望它们位于页面中间。我敢肯定它可能很简单。

我的代码现在看起来像这样：

<body>
  <section class = "slick">
  <ul class = "slider">
    <li>
      <h1>Slide 1</h1>
    </li>
    <li>
      <h1>Slide 2</h1>
    </li> 
    <li>
      <h1>Slide 3</h1>
    </li> 
    <li>
      <h1>Slide 4</h1>
    </li> 
    <li>
      <h1>Slide 5</h1>
    </li> 
    <li>
      <h1>Slide 6</h1>
    </li>
    <li>
      <h1>Slide 7</h1>
    </li>
    <li>
      <h1>Slide 8</h1>
    </li> 
    <li>
      <h1>Slide 9</h1>
    </li>  
  </ul>
  <div class="container">
    <button class="prev slick-arrow"> < </button>
    <button class="next slick-arrow"> > </button>
</div>
</section>

  <script src = "/app.js"></script>
  <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"></script>
  <script>
  $(document).ready(function() {
 $('.slider').slick({
  dots: true,
  centermode: true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3,
  prevArrow: $('.prev'),
  nextArrow: $('.next'),
  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
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
})})
</script>

我的CSS如下：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.slider {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
}

.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.slider h1 {
  border: 2px solid white;
  width: 10rem;
  height : 10rem;
  display: flex;
  justify-content: center;
  background-color: black;
  color: white;
}

谢谢大家！

标签： javascripthtmljquerycssslick

javascript - 使用 Slick-JS 居中幻灯片

问题描述

解决方案

推荐阅读