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

Question

我无法让图像在我制作的自动图像滑块中向左浮动。

由于某种原因，第一张图片前有一个空白 space。

滑块移动后您仍然可以看到之前的部分图像

empty space before first image in slider Second slide

这里是 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

将 padding:0px 添加到您的 auto-slider__content class 在您的 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;
  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>

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

CSS automatic image slider not fitting in frame

html

css

slider