Jak wykonać carousel w Javascript?

Odpowiedz Nowy wątek
2019-10-10 09:24
1

Posiadam mniej więcej taki kod jak poniżej (przykładowy), kilka divów, które są kwadratami, w których jest kilka informacji reklamowych. Chciałbym, żeby one się przesuwały bez przerwy w poziomie, ale tak żeby nie było przerwy i jak jeden się kończy z lewej strony to drugi już się pojawia z prawej strony. Widziałem rozwiązania oparte na background-image i animowanie position, ale to są divy z tekstami i te rozwiązania mają się nijak do mojego. Ponadto, nie chciałbym korzystać z bibliotek pokroju jQuery.
Jak można to rozwiązać?

<div class="banery">

<div class="baner">
<p>Tutaj jakiś tekst...</p>
<p>Tutaj coś jest...</p>
</div>

<div class="baner">
<p>Tutaj jakiś tekst...</p>
<p>Tutaj coś jest...</p>
</div>

<div class="baner">
<p>Tutaj jakiś tekst...</p>
<p>Tutaj coś jest...</p>
</div>

</div>

Pozostało 580 znaków

2019-10-10 09:45
3

ale to są divy z tekstami i te rozwiązania mają się nijak do mojego

To, co jest we wnętrzu DIV nie ma żadnego znaczenia. Ty animujesz sobie element, jakim jest DIV, a on się przesuwa razem ze swoją zawartością. Czy będzie tam tylko czyste tło, jakiś napis, przycisk czy inne elementy DIV nie ma wpływu na zasadę działania animacji.

A co do samej karuzeli - może na początek rzuć okiem na https://www.cssscript.com/tag/carousel/. Nie wiem, czy znajdziesz tam coś idealnie pasującego do Twoich potrzeb, ale analizując kod tych karuzel powinieneś zrozumieć jak one działają, przez co będziesz w stanie którąś z nich dostosować pod siebie, albo w ogóle samodzielnie coś stworzyć.

Plusem jest Twoja niechęć do jQuery czy innych podobnych rozwiązań. To się chwali. Obecnie coraz mniej osób chce pisać w czystym JS.


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
edytowany 2x, ostatnio: cerrato, 2019-10-10 09:52

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0