Плавный цикличный слайдер — как сделать?

Question

[Виктор Викторов]

Только начинаю учить JavaScript и пока не знаю как решить задачу:
Есть блок на сайте:

Его HTML:

<section class="fr-trust-wrapper">
		<img src="img/clients/1.png" alt="Газпром" class="fr-trust-element">
		<img src="img/clients/2.png" alt="" class="fr-trust-element">
		<img src="img/clients/3.png" alt="" class="fr-trust-element">
		<img src="img/clients/4.png" alt="" class="fr-trust-element">
		<img src="img/clients/5.png" alt="" class="fr-trust-element">
		<img src="img/clients/6.png" alt="" class="fr-trust-element">
		<img src="img/clients/7.png" alt="" class="fr-trust-element">
		<img src="img/clients/8.png" alt="" class="fr-trust-element">
		<img src="img/clients/9.png" alt="" class="fr-trust-element">
		<img src="img/clients/10.png" alt="" class="fr-trust-element">
		<img src="img/clients/11.png" alt="" class="fr-trust-element">
		<img src="img/clients/13.png" alt="" class="fr-trust-element">
		<img src="img/clients/14.png" alt="" class="fr-trust-element">
		<img src="img/clients/15.png" alt="" class="fr-trust-element">
		<img src="img/clients/16.png" alt="" class="fr-trust-element">
		<img src="img/clients/17.png" alt="" class="fr-trust-element">
		<img src="img/clients/18.png" alt="" class="fr-trust-element">
		<img src="img/clients/19.png" alt="" class="fr-trust-element">
		<img src="img/clients/20.png" alt="" class="fr-trust-element">
		<img src="img/clients/21.png" alt="" class="fr-trust-element">
		<img src="img/clients/22.png" alt="" class="fr-trust-element">
		<img src="img/clients/12.png" alt="" class="fr-trust-element">
	</section>

Нужно сделать чтоб картинки в блоке как бы прокручивались медленно справа налево, т.е. в кадре были все, но как только первая слева уезжает она тут же появляется справа и так зациклено все двигались.
По возможности хотелось бы не сильно ломать html структуру.

Answer 1

[Stalker_RED]

Дублируем картинки, оборачиваем в еще один враппер и сдвигаем его.
https://jsfiddle.net/09nj2c9f/

Comments

[Виктор Викторов]

а если нужно чтоб section был в ширину 100% ?

[Stalker_RED]

Виктор Викторов, https://jsfiddle.net/09nj2c9f/2/
вот так работает до 700
Если нужно больше, можно либо увеличить кол-во картинок, либо увеличить кол-во повторений.
Если кол-во картинок меняется динамически, то придется диву-обертке высчитать ширину.

[Виктор Викторов]

Stalker_RED, там нужно 11 картинок чтоб было, поставил ширину 2200 пикселей, но все равно на практике косяк - friendsband.ru
первые три картинки при повторе появляются не сразу
еще сложность в том, что всегда ширина картинки 9% и 1 пиксельные отступы, картинок 11 - это для адаптивности сделано.
Может следует посмотреть в сторону owl carousel с параметром автовоспроизведения?

[Stalker_RED]

Виктор Викторов, 2200 пикселей пополам, это 1100. Если размер родительского блока с overflow: hidden больше, то вы будете видеть пустое место в конце.

Увеличьте размер картинок или добавьте их количество, или повторите их трижды, например (если трижды, то придется изменить сдвиг с 50% на 33.3)

[Виктор Викторов]

Stalker_RED, Спасибо!!!

[Stalker_RED]

Виктор Викторов, Как вариант, можно задать размеры в vw, тогда фрейм будет 99vw, удвоенный враппер 198vw, одна картинка высотой и шириной 9vw, как раз под 11 штук.