javascript - 光滑的旋转木马不居中图像

Question

我的页面上有漂亮的旋转木马并且可以正常工作。尽管运气不佳，但我正在尝试使图像居中。我查看了其他问题并尝试了他们的解决方案，但仍然没有成功。

轮播类

<div class="your-class">
        <div class="ad1img">
            <img src="images/ad1.jpg" /></div>
        <div class="ad2img">
            <img src="images/ad2.jpg" /></div>
        <div class="ad3img">
            <img src="images/ad3.jpg" /></div>
</div>

Javascript 代码

<script type="text/javascript">
        $(document).ready(function () {
            $('.your-class').slick({
                arrows: false,
                dots: true,
                autoplay: true,
                swipe: false
            });
        });
    </script>

CSS

.ad1img {
  margin: 0 auto;
}

.ad2img {
  margin: 0 auto;
}

.ad3img {
  margin: 0 auto;
}

Carousel Example

Answer 1

您可能需要设置外部 div 宽度，然后才能使内部内容居中:

$(document).ready(function() {
  $('.your-class').slick({
    arrows: false,
    dots: true,
    autoplay: true,
    swipe: false
  });
});

.your-class {
  width: 800px;
  border: 1px solid black;
}

.img-div {
  width: 100%;
}

.img-div img {
  margin: 0 auto;
}

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<div class="your-class">
  <div class="img-div" id="ad1img">
    <img src="https://via.placeholder.com/300x150" />
  </div>

  <div class="img-div" id="ad2img">
    <img src="https://via.placeholder.com/300x150" />
  </div>

  <div class="img-div" id="ad3img">
    <img src="https://via.placeholder.com/300x150" />
  </div>
</div>