Jak zrobić slider, który zmienia zawartość div'a

Question

Witam, chciałbym zrobić slider, który zmienia zawartość div'a a nie zdjęcie.

Oczywiście próbowałem znaleźć coś w internecie, ale było tam tylko jak zrobić slider zdjęć.
Dlatego też przyszedłem tutaj, by dostać wskazówkę :)

Link do całego kodu: https://codepen.io/Nearr2020/pen/BaWqXRB

Comments

Przykłady z neta pokazują pewnie jak obsłużyć sam slider i zmienic cos w jego zawartosci, po prostu zamiast wrzucać w slider zdjecie zmien kod aby wrzucić contet jaki potrzebujesz, zasada jest ta sama. Napisz najlepiej gdzie konkretnie masz problem to będzie łatwiej pomóc.

---

Teraz myślę, że troszkę źle przedstawiłem problem. Chodziło mi o to, że po kliknięciu na strzałkę zawartość1 zmienia się na zawartość2

---

Odnośnie slidera to jest kilka możliwości , najłatwiejsza opcja to tak jak w przypadku zdjęć , możesz ustawić 3 divy pod sobą , każdemu nadaj opacity 0 i aktywny div po przesunięciu strzałką będzie miał opacity 1 , to chyba najłatwiejsza metoda. Kolejna opcja to jeśli chcesz uzyskać efekt , że jeden slide przesuwa się w lewo , a z prawej strony do lewej pojawia się nowy slide/div , wtedy musisz popracować z transform-translate , ewentualnie pozycjonować odpowiednio left/right , jest jeszcze możliwość użycia metody scrollIntoView , która da podobny efekt.

Answer 1

Algorytm działania:
Ja to widze tak, slider reaguje na jakąś akcje : np kliknięcie, pojawienie się kursora, czy jest odpalany czasowo- więc zachodzi jakieś zdarzenie, w momencie zajścia tego zdarzenia, akcji etc.

Wywołać funkcje- > której celem będzie lokalizacja np. elementu diva jeśli trzeba, i podmiana jego zawartości.

Comments

czyli addEventListener click, a w tym zawartość 1 zmienia się na zawartośc 2 i tak dalej?

Answer 2

Może z tych przykładów dasz radę coś zaadaptować do Twojego projektu

Simple Responsive Pure CSS Text Slider (Horizontal & Vertical)

Pure CSS Horizontal Scrolling