Vytvořit flexibilní komponentu karuselu

Sep 14, 2025

jak

Vue.js přišel na skoky a nedávno se stávají šestým nejvíce vidlicovým projektem Github. V době psaní, dokonce před vlastními reaktjy Facebook. Je bezpečné říci, že je to rychlé stávání základem vývoj webu a spolehlivý jít JavaScript rámec pro použití v projektech.

V tomto tutoriálu budeme používat vue.js vytvořit jednoduchou komponentu karuselu. Tato komponenta přijme řadu různých vlastností, což umožňuje vylepšit některá základní nastavení, jako je rychlost přechodu, typ přechodu, a zda by kolotoč by měl automaticky přechodné snímky.

Pokud to všechno zvuky příliš složité, a Webové stránky Builder. nástroj může být více vaší věci. Rádi vytvoří složitější místo? Potřebuješ web hosting které se mohou vyrovnat.

Zrychlete výkon s Vue.js

Začít, Stáhněte si soubory projektu (a uložte je cloudové úložiště ) a otevřete adresář "šablony webové stránky" do preferovaného textového editoru. Mezitím v terminálu, CD do 'webové stránky-šablony' a pak spusťte 'npm install' pro instalaci závislostí projektů uzl.js. Nakonec běh "npm spustit dev" spustit vývojový server, takže můžete zobrazit projekt v prohlížeči. Typicky by to bylo v 'localhost: 8080'.

01. Vytvořte soubory karuselu

V 'SRC / Components' vytvořte nový adresář s názvem 'App-Carousel-Slide' a v něm dva soubory: 'App-Carousel-Slide.Vue' a 'Component.App-Carousel-Slide.scsss'. Ty budou obsahovat první ze dvou nových komponentů Vue.js, které budeme vytvářet, což při použití společně vytvoří náš karuselový komponentu.

02. Přidejte kolotoč SCSS

Z balíčku FileSilo, zkopírujte obsah '/Support-files/step-02-slide.scsss' do "komponenty.app-carousel-slide.scs '. Toto je SCSS pro posuvné komponenty a používá vlastnost 'Flex-Grow', aby se ujistil, že každý snímek se rozbije k vyplnění svého nadřazeného prvku.

03. Vytvořte složku Slide

V souboru "App-Carousel-Slide.Vue" přidejte úryvek níže a vytvořte strukturu komponentu Vue.js. Použijeme to jako základ, abychom vybudovali sklíčko karuselu.

 & lt; templát & gt; & lt; / template & gt;
& lt; scénář a gt;
Export výchozí {
  Jméno: "App-Carousel-Slide"
}
& lt; / script & gt;

04. Přidání slotu šablony pro snímky karuselových snímků

V prázdné & lt; templátu a gt; Prvek kolotočového snímku, přidáme prvek "div, který představuje sklíčko, spolu se speciálním slotovým prvkem, který budeme jmenovat" obraz ". V aplikaci Vue.js vám sloty umožňují interweave svůj vlastní obsah s šablonou komponenty bez úpravy. V tomto případě se používají, takže můžeme později předat obraz pro snímek pozadí, takže konečný výsledek, když se nakonec použije, vypadat jako "

 & lt; DIV Class = "C-App-Carousel-Slide__Text-blok"
v-if = "to. $. $ sloty ['titul'] || to. $ sloty ['text']" & gt;
  & lt; H1 Class = "C-App-Carousel-Slide__Title"
  v-if = "to. $ sloty ['titul']" & gt;
  & lt; název slotu = "název" & gt; & lt; / slot & gt;
  & lt; / h1 & gt;
  & lt; Div Class = "C-App-Carousel-Slide__Text"
  v-if = "to. $ sloty ['text']" & gt;
  & lt; název slotu = "text" & gt; & lt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Vytvořit soubory karuselů

Zpět v 'SRC / Components', vytvořte nový adresář s názvem 'App-Carousel' a pak v něm dva nové soubory: 'App-Carousel.Vue' a 'Component.App-Carousel.scss'. Ty budou držet druhý z dvou složek Vue.js: hlavní karusel sám.

07. Přidat karusel CSS

Zkopírujte obsah '/Support-files/step-07-slide.scss' do prázdné 'komponenty.app-carousel.scss'. Toto je SCS pro hlavní komponentu karuselu.

08. Vytvořit komponentu karuselu

Další v 'App-Carousel.Vue' budeme stavět strukturu komponenty karuselu. Importujeme komponentu "Appicon" a "šipka" SVG pro pozdější použití v dalším a předchozím ikonám karuselu. Tato práce spolu s závislostí "SVG-Sprite-loader" generovat základní systém SVG Icon System, který pracuje pomocí SVG "symbolů" a jeho prvkem "použití".

 & lt; templát & gt; & lt; / template & gt;
& lt; scénář a gt;
Import Appicon z
'@ / komponenty / app-icon / app-icon'
Import Arrow z
'./../....sets/img/arrow.svg'
Export výchozí {
  Jméno: 'App-Carousel',
  Komponenty: {
  appicon.
  },
  Data () {
  vrátit se {
  Šíp
  }
  }
}
& lt; / script & gt;

09. Vybudujte karuselovou šablonu

Začněme přidávat obsah do prázdného prvku šablony. Hlavní oblastí zajímavého je prvek "C-App-Carousel__Container", který budeme krátce vypočítat šířku pro založenou na počtu diapozitiv nalezených v něm. Poté přejdeme kontejner pomocí CSS transformace: Translatex a přechody na simulaci posuvného pohybu.

 & lt; divné třídy = "c-app-carousel" & gt;
  & lt, divové třídy = "c-app-carousel__wrapper" & gt;
  & lt; divné třídy = "c-app-carousel__container" & gt;
  & lt; slot & gt; & lt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt;

10. Přidejte ovládací prvky a šipky kolotoč

Potom musíme přidat HTML pro kontejner Carousel Controls a předchozí a další šipky; Ten druhý pomocí systému ikon a SVG importovaných v kroku 8. Přidejte tyto po prvku "C-App-Carousel__wrapper".

 & lt; app-icon třídy = "c-app-icon-arrow-prev c-app-carousel__arrow" použití = "arrow" / & gt;
& lt, divové třídy = "c-app-carousel__controls" & gt;
& lt; / div & gt;
& lt, app-icon třídy = "c-app-icon-arrow-další c-app-carousel__arrow" použití = "arrow" / & gt;

11. Vytvořte datový úložiště karuselů a přidejte vlastnosti

Jdeme přidat tři nové vlastnosti do úložiště dat komponenty: "Slidetotal" bude držet celkový počet snímků; "ActivesLideIndex" zaznamená index viditelného snímku, takže může být použit pro výpočet polohy kontejneru; Zatímco autointerval bude zaznamenávat časovač intervalu, který spustí automatický posuvný přechod. Všechny tyto jsou nastaveny na hodnotu NULL, s výjimkou "ActivesLideIndex", kde hodnota "0" označuje, že první snímek by měl být výchozí snímek.

 Data () {
  vrátit se {
  Šíp,
  Slidetotal: Null,
  ActiveSlideIndex: 0,
  autointerval: null.
  }
}

12. Vypočítejte Slidetotal.

Přidat 'REF = "kontejner"' na prvek 'C-App-Carousel__Container' prvek v šabloně a pak přidejte úryvek níže jako vlastnost samotného objektu komponenty. 'Ref' se používá k snadný přístup k prvku, který je v tomto případě kontejner, takže můžeme počítat, kolik dětských prvků (aka diapozitivy) má. Přítomnost této logiky v "namontované ()" znamená, že se pak automaticky spustí, když je komponenta nejprve vykreslena.

 připojený () {
  Tento.slidetotal =
  To. $ REFS.Container.Children.length;
}

13. Vypočítejte šířku kontejneru

V komponentě vytvořte nový objekt objektu s názvem 'Computed' a v něm, nová funkce nazvaná 'Containerwidth ()'. Použijeme to k výpočtu šířky nádoby karusely založené na obrázku "Slidetotální".

 Vypočítáno: {
   kontejnery () {
      vrátit tento.slidetotal * 100 + '%';
   }
}

14. Vytvořit metody

Dále vytvořte další objekt objektu s názvem 'metody' pro uložení našich karuselových funkcí. 'gotoslide ()' je snadný způsob, jak nastavit 'ActivesLideIndex' z kroku 11, 'ISCONTROLACTION ()' se vrátí true, když index indexu řízení "ActiveSlideIndex", zatímco 'nextslide ()' a "Prevslide ()" bude jednoduše procházet diapozitivy.

 Metody: {
  gotoslide (slideIndex) {
  Tento.ActivesLideIndex = SlipExex;
  },
  iscontrolActive (ControlIndIndex) {
  Návrat ControlIndex - 1
  === this.ActivesLideIndex;
  },
  nextslide () {
  This.ActivesLideIndex === To.
  Slidetotal - 1? Tento.activesLideIndex.
  = 0: Tento.activesLideIndex ++;
  },
  Prevslide () {
  This.ActivesLideIndex === 0? tento.
  ActiveSlideIndex = this.slidetotal - 1
  : Tento.ActiveslideIndex--;
  }
}

15. Vypočítejte polohu kontejneru karusely

Karusel používá procentuální hodnotu s transformací: Translatex a CSS animace pro simulaci posuvného přechodu. Přidejte níže úryvek do 'Vypočítaný' objekt, abychom mohli tuto hodnotu vypočítat.

 ActiveSlideSition () {
  návrat '-' + (100 / this.slidetotal)
  * the.activeslideIndex + '%';
}

16. Compose inline CSS

Nyní máme všechny hodnoty pro správné umístění skluzavky karuselu, musíme konstruovat CSS, které pak budeme přidat do atributu "stylu". Tuto logiku přidáte jako další funkci v objektu "Vypočítat".

 kontejnerytyle () {
  vrátit 'šířka: $ {this.containerwidth};
  transformovat: translatex ($ {toto
  .AtivesLideSition}); `

17. Bind inline CSS

Přidejte pod úryvek do prvku 'C-App-Carousel__container' prvek v šabloně. To bude vázat vrácenou hodnotu "kontejnerytyle ()" z předchozího kroku do atributu "stylu" karuselového kontejneru, což znamená, že jeho CSS, a proto jeho poloha bude automaticky aktualizována, když se věci změní.

 V-BIND: Style = "Kontejnerytyle"

18. Připojte další / předchozí šipky

Nyní musíme přidat logiku na další / předchozí šipky tak, že správná metoda z kroku 14 se nazývá, když je každá příslušná šipka kliknuta. Úryvko "Prevslide ()" patří na prvek "C-App-Icon-Icon-Arrow-Prev", zatímco "nextslide ()" patří na prvek "c-app-icon-arrow-další". Směrnice "V-ON" je jen snadný způsob, jak nastavit posluchače událostí v aplikaci Vue.js, s "kliknutím" být událostí DOM, který cílíme.

 // prev
v-on: Click.nate = "Prevslide ()"
// Další
V-dále: Click.nate = "Nextslide ()"

19. Generovat ovládací prvky kolotoče

Pojďme vytvářet ovládací prvky a upozornit odpovídající snímek při klepnutí. Přidejte níže uvedený prvek v 'C-App-Carousel__Controls'. Směrnice "V-for" se používá k vytvoření množství řídicích prvků odpovídajícím proměnné "Slidetotální", zatímco směrnice "V-BIND" umožňuje "IS-Active" třídě pouze tehdy, když se "ISControlActive" z kroku 14 vrátí skutečný. Nakonec vytváříme další posluchač událostí přes 'v-on', takže při kliknutí, ovládací prvek volá metodu "gotoslide" a předá jeho index, který by měl odpovídat indexu odpovídajícího snímku.

 & lt; div v-for = "n v slidetotálním"
: klíč = "n" v vazba: třída =
"{" je-aktivní ': iscontrolActive (n)} "
třída = "c-app-carousel__control"
V-ON: klikněte = "gotoslide (n - 1)" & gt; & lt; / div & gt;

20. Importovat komponenty

Pojďme se teď vrátit na komponentu "App.Vue" a importovat vše. Těsně po otevření & lt; scénář a gt; Značka, import komponenty '.VUE'. Soubory:

 Import Appcarousel z '@ / komponenty / app-carousel / app-carousel'
Import Appcaruselslide z '@ / komponenty / app-carousel-skluzavka / app-carousel-skluzavka'

Dále změnit objekt "komponenty", takže odkazuje tyto nově dovážené komponenty.

 Komponenty: {
   AppButton,
   appcarousel,
   appcaruselslide.
}

Konečně, v

Vytvořit flexibilní komponentu karuselu

01. Vytvořte soubory karuselu

02. Přidejte kolotoč SCSS

03. Vytvořte složku Slide

04. Přidání slotu šablony pro snímky karuselových snímků

06. Vytvořit soubory karuselů

07. Přidat karusel CSS

08. Vytvořit komponentu karuselu

09. Vybudujte karuselovou šablonu

10. Přidejte ovládací prvky a šipky kolotoč

11. Vytvořte datový úložiště karuselů a přidejte vlastnosti

12. Vypočítejte Slidetotal.

13. Vypočítejte šířku kontejneru

14. Vytvořit metody

15. Vypočítejte polohu kontejneru karusely

16. Compose inline CSS

17. Bind inline CSS

18. Připojte další / předchozí šipky

19. Generovat ovládací prvky kolotoče

20. Importovat komponenty

jak - Nejoblíbenější články

Jak zvolit název webové stránky pro vaše podnikání

Jak vypnout webové oznámení pro Windows, MacOS a Android

Převést flash hry na HTML5

Cache v BBC výkonu Booster

Jak vytvořit monstrum stylu labyrintu Pan

Vytvoření organických textur v inkoustu

Udělejte typografický plakát pomocí Adobe InDesign

Vytvořte jednoduché ilustrace pro web

Kategorie