V
V
Viktor Viktorov2017-11-08 22:50:54
JavaScript
Viktor Viktorov, 2017-11-08 22:50:54

Smooth cyclic slider - how to do it?

I'm just starting to learn JavaScript and don't know how to solve the problem yet:
There is a block on the site:
5a035f16d6b43547370071.jpeg
Its 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>

It is necessary to make the pictures in the block scroll slowly from right to left, i.e. everyone was in the frame, but as soon as the first one on the left leaves, she immediately appears on the right and everyone moved in such a loop.
If possible, I would like not to break the html structure too much.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Stalker_RED, 2017-11-08
@CoolHeart

Duplicate the pictures, wrap in another wrapper and move it.
https://jsfiddle.net/09nj2c9f/

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question