Что не так со слайдером?

Question

[niklazh]

сделал автоматический слайдер (по сути просто нужно чтобы как на витрине картинки пролистывались, поэтому взял технику слайдера), но есть одна проблема. По началу всё работает хорошо, картинки меняются всё прекрастно, но когда доходит до последней картинки, то просто всё уезжает за экран и лишь потом возвращается

<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:

.servers_image{
   margin: 0;
   padding: 0;
   position relative;
   float: left;
   height: 300px;
   width: 230px;
   margin-bottom: 3em;
}

.slider {
margin: 0 auto;
height: 300px;
width: 230px;
overflow: hidden;
border-radius: 10px
}

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

@keyframes animatika{
0% {left: 0px;}
10% {left: -230px;}
20% {left: -460px;}
30% {left: -690px;}
40% {left: -920px;}
50% {left: -920px;}
60% {left: -920px;}
70% {left: -690px;}
80% {left: -460px;}
90% {left: -230px;}
100% {left: 0;}
}

Comments

[Froggyweb]

упорство - дело хорошее, но в данном случае - не очень. Например контент менеджер заменил картинки....

[Ankhena]

Значит, на последнем кадре оно не должно уезжать за экран?

[niklazh]

Ankhena, ну типа последняя картинка появляется и должно назад в обратном порядке

[niklazh]

Ankhena, за экран ничего не должно уезжать, на странице всегда должна быть 1 из 3 картинок

[niklazh]

niklazh, сначала 1 картинка потом за ней выезжает 2 ,а за ней выезжает 3, потом в обратном порядке и так бесконечно

[niklazh]

Froggyweb, это самое лучшее что мне удалось найти, остальное либо плохое, либо не то что нужно

[ProjectSoft]

niklazh

остальное либо плохое, либо не то что нужно

Может вы их не правильно "курите"?
Не уж-то этот ни то, что нужно?

Froggyweb

Например контент менеджер заменил картинки....

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

[niklazh]

ProjectSoft, это считай тоже самое, только мне не нужны кнопки, я не хочу чтобы пользователь их переключал вручную

[ProjectSoft]

я не хочу чтобы пользователь их переключал вручную

И что мешает указать это в настройках плагина?

[Ankhena]

niklazh,

за экран ничего не должно уезжать, на странице всегда должна быть 1 из 3 картинок

Я об этом и говорю, а у вас уезжает.
Поправьте анимацию так, чтобы не уезжало.

[Ankhena]

niklazh, и флоат на флекс замените. Не могу смотреть :)

[niklazh]

Ankhena, в этом и был вопрос. Как поправить саму анимацию

[niklazh]

niklazh, но уже не надо, я кароче наслушался что только жизнь себе усложняю, поэтому через js буду делать.

[Ankhena]

niklazh, мне как-то неловко это объяснять

Ваша анимация

0% {left: 0px;}
10% {left: -230px;}
20% {left: -460px;}
30% {left: -690px;}
40% {left: -920px;}
50% {left: -920px;}
60% {left: -920px;}
70% {left: -690px;}
80% {left: -460px;}
90% {left: -230px;}
100% {left: 0;}

Кадр шириной 230px

Первое положение - 0 - видим первый слайд
Второе -230 - задвинули на один слайд - видим второй,
Третье -460 - задвинули на ширину двух слайдов - видим третий
Четвертое -690 - задвинули на 3 слайда - не видим ничего

Так зачем туда задвинули-то?