Как сделать простой автоматический слайдер (без кнопок)?

Question

[niklazh]

добавил три фотографии на страницу и обернул 3-х метровым слоем div-ов

<div class="slider">
    <div class="slides">
        <img class="servers_image" src="content/nm11.png" alt="">
        <img class="servers_image" src="content/nm22.png" alt="">
        <img class="servers_image" src="content/nm33.png" alt="">
    </div>
</div>

и вроде как сделал на css, но почему-то не работает....

.slider{
    height: 300px;
    width: 230px;
    overflow: hidden;

.slides{
    animation: animatika 50s infinite ease;
    width: 690px;
    height: 300px;
    clear: both;
    position: relative;


@keyframes animatika{
    0% {
       left: 0px;
    }
    10% {
       left: -300px;
    }
    20% {
       left: -600px;
    }
    30% {
       left: -900px;
    }
    40% {
       left: -1200px;
    }
    50% {
       left: -1200px;
    }
    60% {
       left: -1200px;
    }
    70% {
       left: -900px;
    }
    80% {
       left: -600px;
    }
    90% {
       left: -300px;
    }
    100% {
      left: 0;
    }

   }

 }
}

Comments

[Froggyweb]

html - норм, а вот CSS ..... бред полный.
сама идея - тоже бред. слайдеры и так не очень в почете, а тут монстр неуправляемый никак.

[niklazh]

Froggyweb, да мне не просто слайдер нужен, мне нужно чтобы 3 картинки менялись друг за другом, как на витрине, а идея слайдера самая близкая к тому что надо, единственное мне не нужны кнопки и всё

[niklazh]

Froggyweb, а вообще лучше бы посоветовал что взять получше чем то что есть

[Froggyweb]

slick swiper owl/ Решений куча.
наиболее популярный нынче swiper

Answer 1

[DmiDrok]

Селекторы надо закрывать:

.slider {
height: 300px;
width: 230px;
overflow: hidden;
}

.slides {
animation: animatika 50s infinite ease;
width: 690px;
height: 300px;
clear: both;
position: relative;
}

@keyframes animatika{
0% {
left: 0px;
}
10% {
left: -300px;
}
20% {
left: -600px;
}
30% {
left: -900px;
}
40% {
left: -1200px;
}
50% {
left: -1200px;
}
60% {
left: -1200px;
}
70% {
left: -900px;
}
80% {
left: -600px;
}
90% {
left: -300px;
}
100% {
left: 0;
}
}
}

Comments

[niklazh]

проблема в том, что картинки когда полностью проехали просто уезжают, не возвращаясь, точнее возвращаясь но поздно, а какое-то время просто пустое пространство