CSS automatic image slider not fitting in frame-CodePudding

I can't get the images to float left in the automatic image slider i made.

for some reason there is an empty space before the first image.

after the slider moves you can still see part of the image that was before that

empty space before first image in slider Second slide

heres the html code snippet

HTML:

<div >
<a href="galeria.html"><div >
    <ul >
        <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>

heres the css code of the slider

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

CodePudding user response：

Add padding:0px to your auto-slider__content class in your 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 >
<a href="galeria.html"><div >
    <ul >
        <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>