CSS自动图像滑块不适合框架

Question

我不能让图像漂浮在我制作的自动图像滑块中。

由于某些原因，在第一个图像之前有一个空空间。

在滑块移动之后，仍然可以看到之前的图像的一部分。

滑块中第一张图像前的空空间 第二滑梯

以下是html代码片段

HTML：

<div class="pokazslajdow">
<a href="galeria.html"><div class="auto-slider">
    <ul class="auto-slider__content">
        <li><img src="img/smol/auto 1 (1).jpg"></li>
        <li><img src="img/smol/auto 1 (2).jpg"></li>
        <li><img src="img/smol/auto 1 (3).jpg"></li>
        <li><img src="img/smol/auto 2 (1).jpg"></li>
        <li><img src="img/smol/auto 2 (2).jpg"></li>
        <li><img src="img/smol/auto 2 (3).jpg"></li>
        <li><img src="img/smol/przyczepka (1).jpg"></li>
        <li><img src="img/smol/przyczepka (2).jpg"></li>
        <li><img src="img/smol/przyczepka (3).jpg"></li>
    </ul>
</div></a>

以下是滑块的css代码

CSS：

:root{
    --img-width: 50vw;
}
.pokazslajdow{
    width: 98%;
    margin: 1%;
    background-color: rgb(0, 0, 0, 0.5);
}
.auto-slider ul{
    margin: 0;
}
.auto-slider img{
    display: block;
    width: var(--img-width);
}
.auto-slider{
    width: var(--img-width);
    border-radius: 10px;
    border: 5px solid black;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
}
.auto-slider__content{
    list-style: none;
    animation-name: slide;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation: slide 30s ease-in-out infinite;
    display: flex;
}
@keyframes slide{
    0%, 9%{transform:translateX(0);}
    11%, 20%{transform:translateX(calc(-1*var(--img-width)));}
    22%, 31%{transform:translateX(calc(-2*var(--img-width)));}
    33%, 42%{transform:translateX(calc(-3*var(--img-width)));}
    44%, 53%{transform:translateX(calc(-4*var(--img-width)));}
    55%, 64%{transform:translateX(calc(-5*var(--img-width)));}
    66%, 75%{transform:translateX(calc(-6*var(--img-width)));}
    77%, 86%{transform:translateX(calc(-7*var(--img-width)));}
    88%, 97%{transform:translateX(calc(-8*var(--img-width)));}
}

Answer 1

在css中将padding:0px添加到auto-slider__content类。

​

:root{
    --img-width: 50vw;
}
.pokazslajdow{
    width: 98%;
    margin: 1%;
    background-color: rgb(0, 0, 0, 0.5);
}
.auto-slider ul{
    margin: 0;
}
.auto-slider img{
    display: block;
    width: var(--img-width);
}
.auto-slider{
    width: var(--img-width);
    border-radius: 10px;
    border: 5px solid black;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
}
.auto-slider__content{
    list-style: none;
    animation-name: slide;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation: slide 30s ease-in-out infinite;
    display: flex;
  padding:0px;
}
@keyframes slide{
    0%, 9%{transform:translateX(0);}
    11%, 20%{transform:translateX(calc(-1*var(--img-width)));}
    22%, 31%{transform:translateX(calc(-2*var(--img-width)));}
    33%, 42%{transform:translateX(calc(-3*var(--img-width)));}
    44%, 53%{transform:translateX(calc(-4*var(--img-width)));}
    55%, 64%{transform:translateX(calc(-5*var(--img-width)));}
    66%, 75%{transform:translateX(calc(-6*var(--img-width)));}
    77%, 86%{transform:translateX(calc(-7*var(--img-width)));}
    88%, 97%{transform:translateX(calc(-8*var(--img-width)));}
}

<div class="pokazslajdow">
<a href="galeria.html"><div class="auto-slider">
    <ul class="auto-slider__content">
        <li><img src="https://placekitten.com/640/360"></li>
        <li><img src="https://placekitten.com/640/360"></li>
        <li><img src="https://placekitten.com/640/360"></li>
        <li><img src="https://placekitten.com/640/360"></li>
        <li><img src="https://placekitten.com/640/360"></li>
   
    </ul>
</div></a>

​