Sebastian N.

present my blog programming

Prosta Karuzela

2019-02-26 SeNBasic-React.js

Karuzela zdjęć/tekstu to nieodzowna część większości stron internetowych. Ich różnorodność jest dość wielka i zależna od projektów, którym mają służyć.

unsplash.com

Czym jest karouzela?

W React.js komponentem, w którym znajdują się takie elementy, jak:

  • tablica danych (images [ ]),
  • funkcje kierujące kierunkiem ruchu/obracania zdjęć/tekstu (nextSlide(), prevSlide()),
  • stany (currentIndex, images [ ], arrowNext, arrowPrev) operujące w/w.

** mogą również zawierać komponenty stylu (np. const containerMain).

Jak zbudować karouzelę?

Na początek warto zaimportować:

import React from 'react';
import arrowRight from '../images/arrowsRight.png';
import arrowLeft from '../images/arrowsLeft.png';

Strzałki (arrows) przygotuj sam, albo pobierz z internetu twój wybór. Przygotuj folder images dla obrazów by zachować przejrzystość projektu.

Następnie przygotuj komponent CarouselExample:

export default class CarouselExample extends React.Component {
    constructor() {
        super();
        this.state = {
            currentIndex: 0,
            images: [
                'https://via.placeholder.com/200x150?text=first',
                'https://via.placeholder.com/200x150?text=second',
                'https://via.placeholder.com/200x150?text=third',
                'https://via.placeholder.com/200x150?text=fourth',
                'https://via.placeholder.com/200x150?text=fifth',
                'https://via.placeholder.com/200x150?text=sixth',
                'https://via.placeholder.com/200x150?text=seventh',
                'https://via.placeholder.com/200x150?text=eighth',
                'https://via.placeholder.com/200x150?text=ninth',
                'https://via.placeholder.com/200x150?text=tenth'
            ],
            arrowNext: arrowRight,
            arrowPrev: arrowLeft
        }
    }

Opiszę po krótce co możesz umieścić i dlaczego?

  • otóż potrzebne będą nam stany, zawarte w this.state takie, jak currentIndex z wartością początkową 0 (dzięki któremu będzie mogli aktualizować stany w this.setState danej funkcji, którą stworzymy), images zawierającą tablicę danych (tzn. obrazów, które będziemy chcieli scrollować/zmieniać), arrowNext i arrowPrev zawierające odniesienie do obrazów strzałek,
  • istotne również jest bind-owanie funkcji i tutaj mamy dwa rozwiązania albo bindować funkcję w contructor:
export default class CarouselExample extends React.Component {
    constructor() {
        super();
        this.nextSlide = this.nextSlide.bind(this);
        this.prevSlide = this.prevSlide.bind(this);
    }
    ...another code
}

albo użyć arrow function, która automatycznie dokonuje bind-owania

prevSlide = () => {
    ...some code
}

Przypinamy jednym albo drugim sposobem funkcje, które mają się wywoływać w odpowiednim kontekście tak by się nie zagubiła.

  • skoro już jesteśmy w tym miejscu przy funkcjach to nadmienię, że kolejnym krokiem jest stworzenie funkcji odpowiedzialnych za scrollowanie w lewo i prawo.
prevSlide = () => {
    const lastIndex = this.state.images.length - 1;
    const resetIndex = this.state.currentIndex === 0;
    const index = resetIndex ? lastIndex : this.state.currentIndex - 1;
    this.setState({
        currentIndex: index
    })
}
nextSlide = () => {
    const lastIndex = this.state.images.length - 1;
    const resetIndex = this.state.currentIndex === lastIndex;
    const index = resetIndex ? 0 : this.state.currentIndex + 1;
    this.setState({
        currentIndex: index
    });
}

Tutaj widzimy ustawienie stałych (const) takich, jak: lastIndex, resetIndex, index odpowiedzialnych za znalezienie indexu ostatniego obrazu w tablicy (lastIndex), powrót do pierwszego indexu obrazu (resetIndex) oraz przypisanie indexu do stanu currentIndex a raczej ich parowania.

  • a teraz przejdziemy w miejsce, gdzie musimy dokonać renderowania index-ów i wyznaczenia, które obrazy z tablicy images mają się pojawić:
render() {
    const index = this.state.currentIndex;
    let firstFiveVideo = this.state.images.slice(index, index + 5);
    if (firstFiveVideo.length < 5) {
        firstFiveVideo = firstFiveVideo.concat(this.state.images.slice(0, 5 - firstFiveVideo.length))
    }
    return (
        ...some code
    )
}

Zatem w tym miejscu zauważyć można, jak zostaje przypisany do index-u stan currentIndex, następnie dokonywane jest tworzenie tablicy zawierającej 5 obrazów (firstFiveVideo) z użyciem metody slice umożliwiającej wyznaczenie index-u początkowego i końcowego zawierającego max 5 elemenetów. Na końcu za pomocą warunku if określamy, że długość (length) tablicy stworzonej, gdy jest mniejsza od 5 to wówczas do tablicy mogą zostać przypisane za pomocą metody concat następne obrazy.

  • przechodzimy teraz do zawartości zwracanej w return:
return (
    <div style={center}>
        Example Carousel
        <div style={containerMain}>
            <div style={container}>
                <img style={arrows} src={this.state.arrowPrev} onClick={this.prevSlide}/>
                    {firstFiveVideo.map((image, index) =>
                        <img style={images} key={index} src={image} alt=""/>
                    )}
                <img style={arrows} src={this.state.arrowNext} onClick={this.nextSlide}/>
            </div>
        </div>
    </div>
)

Tutaj zawuażyć można wykorzystanie 3x komponentów <img…. Dwa z nich przechowują stany arrowPrev, arrowNext za pomocą, których umieszczamy nasze obrazy strzałek i przypisanie do eventu onClick naszych funkcji strzałkowych odpowiadających za zmianę i aktualizację naszego stanu currentIndex, a więc dokładnie rzecz biorąc, jakie obrazy będą w karuzeli wyświetlone. Zaś trzeci z nich po uprzednim mapowaniu, za pomocą metody map pozwala na umieszczanie aktualnych obrazów przy zmianie index-ów.

  • na koniec zostawiłem komponenty stylu (np. style={center}):
const center = {
     textAlign: 'center',
     fontSize: '2em',
     fontWeight: 'bold'
}

W nich przechowujemy kod, który musielibyśmy zapisać w CSS, Sass czy Scss, a które możemy zmieniać z pozycji komponentu w każdym miejscu, w którym go implementujemy w całości.

Podsumowując!

Karuzele są ciekawym rozwiązaniem, z którym będziesz musiał/a się zapoznać i zaprzyjaźnić. Bowiem jest nieodzwonym i stałym punktem na stronach internetowych. Sposobów tworzenia karuzel jest mnóstwo. Miłego!