Utwórz elastyczny komponent karuzeli

Sep 16, 2025

Jak

Vue.js przyszedł niedawno skokowo, stając się szóstym najbardziej widowanym projektem Github W momencie pisania, nawet przede Facebooka. Można bezpiecznie powiedzieć, że szybko staje się ostojem tworzenie stron internetowych i wiarygodne przejście JavaScript Framework. do użytku w projektach.

W tym samouczku będziemy korzystać z VUE.JS, aby stworzyć prosty komponent karuzeli. Ten komponent zaakceptuje wiele różnych właściwości, umożliwiając dostosowanie niektórych podstawowych ustawień, takich jak prędkość przejścia, typ przejścia, a tym, czy karuzela powinna automatycznie zjeżdżalnie.

Jeśli to wszystko brzmi zbyt trudne, a Kreator strony internetowej Narzędzie może być więcej. Chętnie stworzyć bardziej złożoną stronę? Potrzebujesz hosting to może poradzić sobie.

Przyspieszyć wydajność z vu.js

Zaczynać, Pobierz tutaj pliki projektu (i zapisz je magazyn w chmurze ) i otwórz katalog "Szablon strony internetowej" w preferowanym edytorze tekstu. Tymczasem w terminalu, CD na "szablon strony internetowej", a następnie uruchomić "NPM Install", aby zainstalować projekty Node.js. Wreszcie uruchom "NPM Uruchom Dev", aby uruchomić serwer rozwoju, aby można było zobaczyć swój projekt w przeglądarce. Zazwyczaj byłoby to w "Localhost: 8080".

01. Utwórz pliki przesuwne Carousel

W "SRC / Elements" utwórz nowy katalog o nazwie "App-Carousel Slide" iw nim dwa pliki: "App-carousel-slajd.vue" i "Component.app-Carousel-slajd.scss". Będą one zawierać pierwsze z dwóch nowych komponentów Vue.js, które będziemy tworzyć, które używane razem utworzy nasz element Carousel.

02. Dodaj Carousel Slide SCSS

Z pakietu plików skopiuj zawartość "/support-files/step-02-slide.scss" do "Component.app-Carousel-slajd.scss". Jest to SCSS dla komponentu slajdów i wykorzystuje właściwość "Flex-Grow", aby upewnić się, że każdy slajd rozszerza się, aby wypełnić element macierzystego.

03. Utwórz komponent slajdów

W pustym pliku "app-carousel-slajd.vue", dodaj fragment poniżej, aby utworzyć strukturę komponentu VUE.JS. Użyjemy tego jako fundamentu, aby zbudować przesuwanie karuzeli.

 Template & GT; & Template & GT;
& lt; script & gt;
Eksportuj domyślne {
  Nazwa: "Carousel slajd"
}
& lt; / script & gt;

04. Dodaj gniazdo szablonu dla obrazów slajdów Carousel

W pustym & LT; Szablon i GT; Element przesuwania karuzeli, dodamy element "div", aby reprezentować slajd, wraz ze specjalnym elementem szczelin, który będziemy nazwać "obraz". W vue.js, sloty umożliwiają interwetację własnych treści z szablonem komponentu bez jej edycji. W tym przypadku są one używane, abyśmy mogli później przekazać obraz na tle slajdów, więc wynik końcowy, gdy jest to ostatecznie stosowany, wyglądałby jak "Carousel-Slide & GT;" Alt; " '& lt; & Carousel-Slide & GT;'.

05. Dodaj kontener tekstu slajdów

Wszystko, co pozostaje dla komponentu slajdów, jest zbudowanie kontenera tekstowego. Będziemy ponownie używać automatów, jeden dla większego tytułu slajdów i jeden dla zwykłego tekstu. Będziemy również korzystać z dyrektywy Vue.js o nazwie "V-IF", aby dodać logikę, co powoduje tylko pojemnik na tekst, jeśli przynajmniej jeden z gniazda jest przekazywana zawartość. Dodaj ten fragment w "C-App-Carousel-Slide", tuż przed slotem "Image".

06. Utwórz pliki karuzeli

Wstecz w "SRC / Składniki", utwórz nowy katalog o nazwie "App-Carousel", a następnie w niej dwa nowe pliki: "app-carousel.vue" i "komponent.app-carousel.scss". Będą one utrzymywać drugi z dwóch komponentów Vue.js: główna karuzela sama.

07. Dodaj Carousel CSS

Skopiuj zawartość "/support-files/step-07-slide.scss" do pustego "komponent.app-carousel.scss". To jest SCSS dla głównego komponentu karuzeli.

08. Utwórz komponent karuzeli

Dalej w "App-carousel.vue", zamierzamy zbudować strukturę komponentu karuzeli. Importujemy komponent "Appicon" i "strzałka" SVG do późniejszego użycia w następnych i poprzednich ikonach Carousela. Te współpracują wraz z zależnością "SVG-Sprite-Loader" do generowania podstawowego systemu ikon SVG, który działa przy użyciu elementu SVG "Symbole" i jego "Użyj".

 Template & GT; & Template & GT;
& lt; script & gt;
Importuj Appicon z
"@ / komponenty / ikona aplikacji / ikona aplikacji"
Importuj strzałkę z
'/../../assets/img/arrow.svg '
Eksportuj domyślne {
  Nazwa: "App-Carousel",
  składniki: {
  apicon.
  },
  Dane () {
  powrót {
  strzałka
  }
  }
}
& lt; / script & gt;

09. Zbuduj szablon karuzeli

Zacznijmy dodawać treści do pustego elementu szablonu. Głównym obszarem zainteresowania jest element "C-app-Carousel__container", który wkrótce obliczymy szerokość na podstawie liczby zjeżdżalni znalezionych w niej. Następnie przesurzymy się pojemnik za pomocą CSS Transform: Translatex i przejścia, aby symulować ruch przesuwania.

10. Dodaj elementy sterujące i strzałki karuzeli

Następnie musimy dodać HTML dla kontenera Carousel Controls i poprzednie i następne strzałki; Ten ostatni przy użyciu systemu Icon i SVG importowany w kroku 8. dodaj je po elemencie "C-App-Carousel__Wrapper".

 & LT; App-Icon Class = "C-App-Icon-ARROW-prev C-App-Carousel__arrow" Użyj = "Strzałka" / & GT;
& lt; div class = "c-app-carousel__controls" & gt;
& lt; / div & gt;
& LT; App-Icon Class = "C-App-Icon-arrow-Dalej C-App-Carousel__Rrow" Użyj = "Strzałka" / & GT;

11. Utwórz sklep danych Carousel i dodaj właściwości

Dodajemy trzy nowe właściwości do sklepu danych Component: "Slidetotal" będzie miał całkowitą liczbę slajdów; "ActivesSlideindex" zapisywanie indeksu widocznego slajdu, dzięki czemu można go użyć do obliczenia pozycji kontenera; Podczas gdy AutoInterval rejestruje timer interwałowy, który uruchomi automatyczne przejście slajdów. Wszystkie z nich są ustawione na NULL, z wyjątkiem "ActivesSlideindex", gdzie wartość "0" wskazuje, że pierwszy slajd powinien być domyślnym slajdem.

 Dane () {
  powrót {
  strzałka,
  Slidetotal: NULL,
  ActivesSlideindex: 0,
  AutoInterval: Null.
  }
}

12. Oblicz slidetotal.

Dodaj "Ref =" pojemnik "" do elementu "C-App-Carousel__container" w szablonie, a następnie dodaj fragment poniżej jako właściwość samego obiektu komponentu. "REF" jest używany do zapewnienia łatwego dostępu do elementu, który w tym przypadku jest pojemnik, dzięki czemu możemy policzyć, ile elementów dziecka (ona zjeżdżalnia). Obecność tej logiki w funkcji "montowane ()" oznacza, że jest następnie automatycznie uruchamiany, gdy składnik jest najpierw renderowany.

 Zamontowany () {
  to.slidetotal =.
  to. $ refs.container.children.length;
}

13. Oblicz szerokość pojemnika

W komponencie utwórz nową właściwość obiektu o nazwie "Obliczone" i w nim, nowa funkcja zwana "kontenerowcem ()". Użyjemy tego do obliczenia szerokości kontenera karuzelowego na podstawie figury "Slidetotal".

 Obliczone: {
   Containerwidth () {
      zwróć to.Slidetotal * 100 + '%';
   }
}

14. Utwórz metody

Następnie utwórz kolejną właściwość obiektu o nazwie "Metody", aby przechowywać funkcje naszej karuzeli. "Gotoslide ()" jest łatwym sposobem ustawienia "Activesslideindex" z kroku 11, "iscontrolactive ()" zwraca prawdę, gdy indeks kontroli pasuje do "Activesslideindex", podczas gdy "Nextside ()" i "Prevlide ()" po prostu przejdzie slajdy.

 Metody: {
  Gotoslide (Slidendex) {
  to.activeslideindex = slowdex;
  },
  iscontrolactive (controlindex) {
  RETROT CONTROLDINDEX - 1
  === ta.activeslideindex;
  },
  Następny slajd() {
  to.activeslideindex === To.
  Slidetotal - 1? to.activeslideindex.
  = 0: ta.Activeslideindex ++;
  },
  Prevlide () {
  to.activeslideindex === 0? to.
  ActivesSlideindex = this.Slidetotal - 1
  : to.activeslideindex--;
  }
}

15. Oblicz pozycję pojemnika Carousel

Karuzela wykorzystuje wartość procentową z transformacją: animacji Translatex i CSS, aby symulować przejście slajdów. Dodaj poniższy fragment do obiektu "obliczony", abyśmy mogli obliczyć tę wartość.

 ActivesLidePosition () {
  Wróć "-" + (100 / to.Slidetotal)
  * to.activeslideindex + '%';
}

16. Skomponować Inline CSS

Teraz mamy wszystkie wartości, aby poprawnie ustawić kontenera przesuwania karuzeli, musimy skonstruować CSS, które następnie dodamy do atrybutu "stylu". Dodamy tę logikę jako inną funkcję w obiekcie "obliczony".

 ContainersTyle () {
  Powrót "Szerokość: $ {to.Containerwidth};
  Transform: Translatex ($ {to
  .activesLideposition}); `

17. Bind Inline CSS

Dodaj poniższy fragment do elementu "C-App-Carousel__container" w szablonie. Spowoduje to wiązanie zwracanej wartości "kontenerów ()" z poprzedniego kroku do atrybutu "stylu" pojemnika na karuzeli, co oznacza, że jego CSS i dlatego jego pozycja zostanie automatycznie zaktualizowana, gdy się zmieni.

 V-wiążą: Style = "Konkursyty"

18. Podłączyć następne / poprzednie strzały

Teraz musimy dodać logikę do następnych / poprzednich strzałek, aby nazywa się poprawna metoda z kroku 14, gdy kliknięta jest każda strzałka. Fragment "Prevlide ()" należy do elementu "C-App-Icon-arrow", podczas gdy "Nextside ()" należy do elementu "C-App-Icon-Strzałki-Dalej". Dyrektywa "V-ON" jest łatwym sposobem na skonfigurowanie słuchaczy zdarzeń w VUE.JS, a "kliknij" będąc wydarzeniem DOM, który kierujemy.

 // prev
V-ON: click.native = "Prevlide ()"
// Kolejny
V-ON: click.native = "Nextside ()"

19. Wygeneruj Carousel Controls

Wygenerujmy elementy sterujące i sprawiają, że pokazują odpowiednią suwak po kliknięciu. Dodaj poniżej elementu w "C-App-Carousel__Controls". Dyrektywa "V-for" jest wykorzystywana do stworzenia ilości elementów sterujących pasujących do zmiennej "Slidetotal", podczas gdy dyrektywa "V-wiążąca" umożliwia "Active" klasę tylko wtedy, gdy metoda "iscontrolactive" z kroku 14 powróci prawdziwe. Wreszcie tworzymy inny słuchacz zdarzeń przez "V-ON", więc po kliknięciu sterownik wywołuje metodę "Gotoslide" i przechodzi swój indeks, który powinien pasować do indeksu odpowiedniego slajdu.

 Div v-for = "n w slidetotal"
: Klucz = "N" V-wiążą: klasa =
"{'jest-aktywny": iscontrolactive (n)} "
Class = "C-App-Carousel__Control"
V-ON: Click = "Gotoslide (N - 1)" & GT; & LT;

20. Importuj komponenty

Wróćmy do najwyższego poziomu "app.vue" komponent i importuj wszystko. Tuż po otwarciu i skrypcie; Tag, importuj komponent ".vue". akta:

 Import AppCarousel z "@ / Components / App-Carousel / App-Carousel"
Importuj AppCarouselslide z '@ / Components / App-Carousel-Slide / App-Carousel-Slide'

Następnie zmień obiekt "komponentów", dzięki czemu odnosi się do tych nowo importowanych komponentów.

 Składniki: {
   appbutton,
   appcarousel,
   AppCarouselslide.
}

Wreszcie w stylu & gt; Tag, importuj nasze nowe SCSS z resztą importu komponentu.

 @import "/ Components / App-Carousel /
Component.app-Carousel ";
@import "/ Components / App-Carousel-Slide /
Component.app-Carousel Slide ";

21. Dodaj karuzelę i slajdy

Wreszcie dodajmy naszą nową komponent karuzeli, a niektóre zjeżdżalnie do głównej aplikacji. Nadal w "app.Ve", zastąp "w budowie" z fragmentem poniżej. Każdy app-carousel-slajd & gt; Element reprezentuje pojedynczy slajd. Dodaj tyle, ile chcesz, zastępując tekst lub obraz, w razie potrzeby. Zawarte są "test-photo-01.jpg" do "Test-photo-05.jpg". Po zakończeniu kompilacji, wszystko powinno teraz pracować. Huzzah!

& LT; App-Carousel & GT;
  & LT; App-Carousel Slide & GT;
  & lt; szablon Slot = "tytuł" & GT; mój slajd
  & LT; / Template & GT;
  & lt; szablon Slot = "Tekst" & GT;
  & lt; P & GT; jest to zjeżdżalnia karuzeli. ° C / P & GT;
  & LT; App-Button & GT; Let's Go & LT; / App-Button & GT;
  & LT; / Template & GT;
  & lt; img Slot = "Image"
  src = "./ zasoby / img / test-photo-01.jpg"
  alt = "moje zdjęcie karuzeli" & gt;
  & LT; / App-Carousel-Slide & GT;
& LT; / App-Carousel & GT;

22. Dodaj elastyczność do karuzeli

Teraz mamy funkcjonalność Vue.js Repen 'App-Carousel.vue' i dodaj właściwości w fragmence poniżej obiektu komponentu.

 Rekwizyty: {
  Przejście: {
  Typ: String,
  Domyślnie: "0,5s"
  },
  TransitionTiming: {
  Typ: String,
  Domyślnie: "łatwość"
  }
}

23. Zmień kontenera ()

Wartości przekazane do tych właściwości powinny podjąć drogę do Inline CSS CSS z powrotem w kroku 17. Zmieńmy funkcję obliczonej "kontenerów", aby upewnić się, że tak się dzieje.

 ContainersTyle () {
  Powrót `Szerokość: $ {to.Containerwidth};
  przekształcać:
  Translatex ($ {to.activeslideposition});
  Funkcja transformacji-rozrządu:
  $ {to.transitiontiming};
  Czas przejściowy:
  $ {to.transitionduration}; `
}

24. Przechodzą dane do właściwości karuzeli

Poniższy fragment ilustruje, w jaki sposób przekazujemy dane do tych nowych właściwości do Caruzel i GT; element w "app.vue". Po dodaniu, powinieneś być w stanie przekazać wszystkie wartości, które chcesz. Na przykład czas trwania "3,0" spowodowałoby to bardzo powolne przejście przesuwne!

 Alp-Carousel
Czas przejściowy = "0,25s"
transformacja = "łatwość out" & gt;

25. Dodawanie automatyczny rekwizyty

W przypadku auto-slajd musimy dodać dwa dodatkowe obiekty do "rekwizytów" w "app-carousel.vue". "Auto" jest albo "true" lub "false", co odpowiada, jeśli karuzela powinna kontynuować automatyczne przesuwanie. "Autotiming" kontroluje czas przed wyzwalarem automatycznego przesuwania, z wartością domyślną wynosi 5000 milisekund.

 Auto: {
  Typ: String,
  Domyślnie: "false"
},
Autotiming: {
  Typ: String,
  Domyślnie: 5000.
}

26. Zainicjuj automatyczny slajd

Teraz musimy zainicjować automatyczny slajd na obciążeniu składowym. W funkcji "Zamontowany ()" Carousel, po istniejącej zawartości, sprawdź, czy właściwość "Auto" jest ustawiona na "True". Jeśli tak, utwórz interwał, który powoduje wielokrotnie metodę "Nextside ()", gdy przekazano wartość "Autotiming".

 IF (this.auto === "true") {
  to.Autointerval = setinterval (() = & gt; {
  to.nextside ();
  }, Parseint (to.autotiming));
}

How the carousel works: simply put, the trick is that the slides themselves don’t move, but the container element which holds the slides in place does — Jak działa karuzela: po prostu umieścić, sztuczka polega na tym, że slajdy się nie poruszają, ale element kontenera, który trzyma slajdy na miejscu

27. Anuluj metodę automatycznego przesuwania

Oczywiście potrzebujemy sposobu, aby użytkownik wyłączyć auto-slajd, jeśli wyrazili pragnienie, aby ręcznie obsługiwać karuzelę. Pierwszym krokiem w kierunku tego jest nowa metoda karuzeli o nazwie "Ananuntautosslide". To po prostu anuluje interwał utworzony w poprzednim kroku.

 Annęutozlide () {
   Clearterval (this.autointerval);
}

28. Wyzwalacz AnulutoutosLide.

Jeśli użytkownik kliknie strzałkę lub element sterujący, uzasadnione jest założenie, że chcą ręcznie obsługiwać karuzelę, więc wywołajmy metodę "anulanutosonide", jeśli kliknięto którykolwiek z tych elementów. Aby to zrobić, po prostu dodaj "+ Anulujutozlide () do dyrektywy każdej dyrektywy" V-ON ". Zobacz fragment poniżej, aby na przykład przy użyciu arrow "poprzednia".

 V-ON: click.native = "Prevlide () + ANDANAUTOSLIDE ()"

29. Przejdź wartości do auto-slajdów

Wreszcie, przekażmy pewne wartości do właściwości auto-slajdów, które stworzyliśmy. Z powrotem w "App.vue", dodaj poniższy fragment do Carousel & GT; Element, aby włączyć automatyczny slajd co trzy sekundy.

 Auto = "True" Auto-Timing = "3000"

30. Zakończ budowę komponentu karuzeli

Anuluj Serwer Rozwoju lub Otwórz nowe okno Terminal i uruchom "NPM RUN BUILD", aby utworzyć skompilowaną, produkcyjną wersję komponentu Carousel w Vue.JS w katalogu "Dist".

Ten artykuł został pierwotnie opublikowany w wydaniu 269 kreatywnych projektantów Web Magazine Web Design Magazine. Kup problem 269 tutaj lub Subskrybuj tutaj projektant stron internetowych .

Wydarzenie Web Design. Generować Londyn Zwraca w dniach 19-21 września 2018, oferując pakowany harmonogram wiodących przemysłu, pełny dzień warsztatów i cennych możliwości sieci - nie przegap tego. Weź swój Generować bilet teraz. .

Powiązane artykuły:

7 Podstawowe narzędzia dla dzisiejszego projektanta WWW
Dodaj efekt usterki na swoją stronę
6 Niesamowite strony "o", aby Cię zainspirować