Как правильно доделать движущийся «слайдер»?

Question

[Дмитрий]

Просьба подсказать, как правильно доделать этот слайдер, если можно так сказать. Это то, что получилось.
Оригинал здесь (чуть ниже на странице движутся картинки).

1. Вопрос в том, как правильно сделать, чтобы при движении первая картинка шла за последней, без огромного промежутка между ними?
2. Что именно поменять, чтобы это всё двигалось и в обратном направлении (вправо)?

Answer 1

[hzzzzl]

см в код, они дублируют все слайды в .row, чтобы на экране справа появлялись копии вместо белого места,
а в css прописана анимация так:

@keyframes slide {
	0% {
		transform: translate(0, 0);
	}
	100% {
                /* хитрый момент */
		transform: translate(calc(170px * 20 * -1), 0); 
		/* each image element is 170px wide and there are twenty (before repeats) */
	}
}

Comments

[Дмитрий]

Большое спасибо за ответ с примером! Вроде всё работает, но заметно какое-то подёргивание иногда, а не так плавно, как на том сайте. Да и gap не работает в Safari, но это мелочи.

И ещё, возможно ли как-то сделать, чтобы не использовать калькулятор в трансформ?

Обновил страницу, вот, что получилось.

[hzzzzl]

Дмитрий, а блин точно, у меня дергается именно из-за этого gap, из-за которого calc неправильно считает и анимация не зацикливается :)

чтобы не использовать калькулятор в трансформ

ну так формула есть, если всё заранее известно, то можно и вписать вручную хех

/* transform: translate(calc(200px * 6 * -1), 0); */
/* 6 блоков по 200, движение влево (минус) */
transform: translateX(-1200px);

[Дмитрий]

hzzzzl, так даже без gap не получается непрерывного движения картинок. В примере это хорошо видно.

[hzzzzl]

Дмитрий, убрать margin-left: 30, потому что это сломает calc

100% {
		transform: translate(calc(200px * 12 * -1), 0); /* 12? */
	}

и в самой анимации стоит 12 блоков, а на странице 11 блоков?
прикол же в том, что повторяющиеся блоки "после основных" будут рисоваться вместо белого места, а потом анимация незаметно скинется на 0% и зациклится

[hzzzzl]

[Дмитрий]

hzzzzl, ещё раз спасибо за ответ, но то ли я что-то не так делаю, но не получается. Обновил пример.

[Дмитрий]

hzzzzl, в общем, получается так, что работает нормально, без больших пробелов, с calc(150px * 3 * -1), то есть анимация для трети картинок. Но и то не работает толком, зависит от количества картинок.