javascript - 微型 slider 没有正确居中图像

Question

我正在尝试使用 tiny-slider ，小型 vanilla js 轮播库，但当每张幻灯片仅显示一个元素时，我在将图像居中时遇到问题。

        var slider = tns({
            container: '.slide',
            items: 1,
            mode: 'carousel',
            slideBy: 'page',
            autoplay: false,
            mouseDrag: true,
            center: false,
            nav: false
        });

.container {
  width: 100%;
}
ul {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css" rel="stylesheet"/>
<div class="container"> 
<ul class="slide">
<li><img src="https://via.placeholder.com/720x460" alt=""></li>
<li><img src="https://via.placeholder.com/720x460" alt=""></li>
<li><img src="https://via.placeholder.com/720x460" alt=""></li>
</ul>
</div>

我尝试使用 display: block; margin: 0 auto; 到图像，但图像稍微偏右。

github 问题页面对这个具体案例没有帮助，因此感谢任何帮助。

Answer 1

tiny-slider 生成的每个 li 都有一个“tns-item”类。 您需要为此添加一个 css 规则:

li.tns-item{
    text-align:center;
}