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

杀手狂野

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

旋转木马类

<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;
}

轮播示例

菲尔·拉克斯

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

https://jsfiddle.net/lucksp/uokbrrdv/

<div class="your-class">
  <div class="img-div" id="ad1img">
    <img src="https://placehold.it/650x150" /></div>
  <div class="img-div" id="ad2img">
    <img src="https://placehold.it/650x150" /></div>
  <div class="img-div" id="ad3img">
    <img src="https://placehold.it/650x150" /></div>
</div>
.your-class {
  width: 800px;
  border: 1px solid black;
}

.img-div {
  width: 100%;
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。