Question

我正在尝试使用tiny-slider（小型香草js轮播lib），但是在每张幻灯片仅显示一项时，我在将图片居中时遇到问题。

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/color3"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolBar"
        android:layout_width="0dp"
        android:layout_height="56dp"
        android:background="#dc2700"
     />
</com.google.android.material.appbar.AppBarLayout>

        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>，但是图像略微偏右。

github问题页面在此特定情况下没有帮助，因此可以提供任何帮助。

Answer 1

每个小滑块产生的li都有一类“ tns-item”。您需要为此添加一个css规则：

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

小滑块无法正确居中图像

1 个答案: