Criar um componente de carrossel flexível

Vue.js veio em saltos e limites recentemente, tornando-se o sexto projeto mais bifurcado até agora Github No momento da escrita, mesmo à frente do próprio reactJs do Facebook. É seguro dizer que é rápido se tornar um pilarmente em desenvolvimento web e um confiável ir-a Framework JavaScript. para uso em projetos.

Neste tutorial, vamos usar vue.js para criar um componente de carrossel simples. Este componente aceitará uma série de propriedades diferentes, permitindo que você ajuste algumas configurações básicas, como velocidade de transição, tipo de transição e se o carrossel deve transitar automaticamente slides.

Se tudo isso soa muito complicado, um Construtor de sites ferramenta pode ser mais sua coisa. Feliz por criar um site mais complexo? Você precisa hospedagem na web. que pode lidar.

• Acelerar o desempenho com vue.js

Para começar, Baixe os arquivos do projeto aqui (e salvá-los em armazenamento na núvem ) e abra o diretório 'site-modelo' no seu editor de texto preferido. Enquanto isso, no Terminal, CD em 'Website-Model' e, em seguida, execute 'NPM Install' para instalar as dependências de projectos Node.js. Finalmente, execute 'npm executar dev' para iniciar um servidor de desenvolvimento para que você possa visualizar seu projeto no navegador. Normalmente, isso seria em 'localhost: 8080'.

01. Crie arquivos de slides do carrossel

Em 'SRC / Components', crie um novo diretório chamado 'App-Carousel-Slide' e, nele, dois arquivos: 'App-carrossel-slide.vue' e 'component.app-carrossel-slide.scss'. Estes conterão o primeiro de dois novos componentes vue.js que estaremos criando, que quando usados ​​juntos criarão nosso componente de carrossel.

02. Adicione o carrossel slide scss

No pacote FilesILo, copie o conteúdo de '/support-files/step-02-lide.scss' em 'component.app-carrossel-slide.scss'. Este é o SCSS para o componente de slides e usa a propriedade 'Flex-Cremer' para garantir que cada slide se expande para preencher seu elemento pai.

03. Crie o componente de slides

No arquivo vazio 'App-Carousel-Slide.Vue', adicione o snippet abaixo para criar a estrutura do componente VUE.JS. Nós vamos usar isso como uma fundação para construir o slide do carrossel.

 & lt; modelo & gt; & lt; / modelo & gt;
& lt; script & gt;
exportar default {
  Nome: 'App-carrossel-slide'
}
& lt; / script & gt; 

04. Adicionar um slot de modelo para as imagens de slides do carrossel

No modelo vazio e lt; Elemento do slide do carrossel, vamos adicionar um elemento 'div' para representar o slide, juntamente com um elemento de slot especial que vamos nomear 'Image'. No Vue.js, os slots permitem que você entrelaça seu próprio conteúdo com o modelo do componente sem editá-lo. Nesta instância, eles são usados ​​para que possamos passar mais tarde na imagem para o fundo de slide, então o resultado final, quando finalmente usado, pareceria como '& lt; app-carrossel-slide & gt; e lt; img src =' 'alt =' '& gt; & lt; / app-carrossel-slide & gt;'.

 & lt; div classe = "c-app-carrossel-slide" & gt;
  & lt; slot name = "imagem" & gt; & lt; / slot & gt;
& lt; / div & gt; 

05. Adicione o contêiner de texto de slides

Tudo o que resta para o componente de slides é construir o contêiner de texto. Vamos usar slots novamente, um para o título maior de slide e um para texto regular. Também estaremos usando uma diretiva vue.js chamada 'V-IF' para adicionar lógica, que só torna o contêiner de texto se pelo menos um dos slots é passado conteúdo. Adicione este snippet em 'C-App-Carousel-Slide', pouco antes do slot 'Image'.

 & lt; div class = "c-app-carrossel-slide__text-block"
v-if = "isso. $ slots ['title'] || isso. $ Slots ['Texto']" & GT;
  & lt; h1 class = "c-app-carrossel-slide__title"
  v-if = "isso. $ slots ['título']" & gt;
  & lt; slot name = "title" & gt; & lt; / slot & gt;
  & lt; / h1 & gt;
  & lt; div class = "c-app-carrossel-slide__Text"
  v-if = "isso. $ Slots ['Texto']" & GT;
  & lt; slot name = "text" & gt; & lt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Crie arquivos de carrossel

De volta em 'SRC / Components', crie um novo diretório chamado 'App-carrossel' e, em seguida, dentro dela dois novos arquivos: 'app-carrossel.vue' e 'component.app-carrossel.scss'. Estes realizarão o segundo dos dois componentes vue.js: o próprio carrossel principal.

07. Adicione o carrossel CSS

Copie o conteúdo de '/support-files/step-07-slide.scss' no vazio 'componente.app-carrossel.scss'. Este é o SCSS para o componente principal do carrossel.

08. Crie componente do carrossel

Em seguida, em 'App-carrossel.vue', vamos construir a estrutura do componente do carrossel. Estamos importando o componente 'AppIcon' e a SVG 'Seta' para uso posterior no próximo ícones e anteriores do carrossel. Estes trabalham em conjunto com a dependência 'svg-sprite-loader' para gerar um sistema básico de ícone do SVG, que funciona usando svg 'símbolos' e seu elemento 'use'.

 & lt; modelo & gt; & lt; / modelo & gt;
& lt; script & gt;
importar appicon de
'@ / components / app-icon / app-icon'
Importar seta de
'./../../assets/img/arrow.svg'
exportar default {
  Nome: 'App-carrossel',
  Componentes: {
  appicon.
  },
  dados() {
  Retorna {
  seta
  }
  }
}
& lt; / script & gt; 

09. Construa o modelo de carrossel

Vamos começar a adicionar conteúdo ao elemento de modelo vazio. A principal área de interesse aqui é o elemento 'C-App-Carrossel__Container', que calcularemos uma largura para com base no número de slides encontrados dentro dele. Em seguida, moveremos o contêiner usando o CSS Transform: TranslateX e transições para simular o movimento de slides.

 & lt; div classe = "c-app-carrossel" & gt;
  & lt; div class = "c-app-carrossel__wrapper" & gt;
  & lt; div class = "c-app-carrossel__container" & gt;
  & lt; slot & gt; & lt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt; 

10. Adicione os controles e flechas do carrossel

Precisamos então adicionar o HTML para o recipiente de controles de carrossel e as setas anteriores e seguintes; Este último usando o sistema de ícones e o SVG importado na etapa 8. Adicionar estes após o elemento 'C-App-Carrossel__wrapper'.

 & lt; app-icon class = "c-app-icon-arrow-prev an app-carossel__arrow" use = "arrow" / & gt;
& lt; div class = "c-app-carossel__controls" & gt;
& lt; / div & gt;
& lt; app-icon class = "C-App-icon-arrow-next c-app-carossel__arrow" use = "arrow" / & gt; 

11. Crie o armazenamento de dados do carrossel e adicione propriedades

Nós vamos adicionar três novas propriedades ao armazenamento de dados do componente: 'Slidetotal' manterá o número total de slides; 'ActiveSlidEndex' registrará o índice do slide visível para que ele possa ser usado para calcular a posição do contêiner; Enquanto o AutoIhterVal registrará o temporizador de intervalo, que desencadeará uma transição automática de slides. Todos estes são definidos para NULL, com exceção de 'ActiveSlideIndex', onde o valor '0' indica que o primeiro slide deve ser o slide padrão.

 dados () {
  Retorna {
  seta,
  Slidetotal: nulo,
  ActiveSlidEndex: 0,
  AutoIhterVal: null.
  }
} 

12. Calcular Slidetotal.

Adicione 'ref = "contêiner" para o elemento' C-App-Carousel__Container 'no modelo e adicione o snippet abaixo como uma propriedade do objeto componente em si. 'Ref' é usado para dar acesso fácil a um elemento, que neste caso é o recipiente para que possamos contar quantos elementos de criança (também conhecidos como slides). A presença desta lógica em uma função 'montada ()' significa que é então executada automaticamente quando o componente é processado pela primeira vez.

 montado () {
  this.slidetotal =.
  isso. $ refs.container.Children.Length;
}

13. Calcule a largura do recipiente

No componente, crie uma nova propriedade objeto chamada "computada" e dentro dela, uma nova função chamada "ContainerWidth ()". Vamos usar isso para calcular a largura do recipiente de carrossel com base na figura 'slidetotal'.

 computado: {
   ContainerWidth () {
      retornar este.Slidetotal * 100 + '%';
   }
} 

14. Criar métodos

Em seguida, crie outra propriedade objeto chamado 'métodos' para armazenar as funções do carrossel. 'GOTAOSLIDE ()' é uma maneira fácil de definir 'ActiveSlidEndex' da etapa 11, 'isControlActive () retorna true quando um índice de um controle corresponde' ActiveSlidEndex ', enquanto' Nextslide () 'e' Prevlide () simplesmente os slides.

 Métodos: {
  gojeiroslide (slideindex) {
  este.ActivesLideIndex = slideindex;
  },
  iscontrolactive (controlindex) {
  Retorna ControlIndex - 1
  === este.ActivesLideIndex;
  },
  próximo slide() {
  Este.ActivesLideIndex ===.
  Slidetotal - 1? este.ActivesLidindex.
  = 0: este.ActivesLideIndex ++;
  },
  Prevlide () {
  este.ActivesLideIndex === 0? esta.
  ActiveSlideIndex = isto.slidetotal - 1
  : este.ActivesLideIndex--;
  }
} 

15. Calcule a posição do recipiente do carrossel

O carrossel usa um valor percentual com a Transform: Animação TranslateX e CSS para simular a transição de slides. Adicione o snippet abaixo ao objeto 'computado' para que possamos calcular esse valor.

 ActiveSlidePosition () {
  return '-' + (100 / this.slidetotal)
  * este.ActivesLideIndex + '%';
} 

16. Compor CSS Inline

Agora temos todos os valores para posicionar corretamente o recipiente de slides do carrossel, precisamos construir o CSS que iremos adicionar ao seu atributo 'estilo'. Acrescentaremos essa lógica como outra função no objeto "computado".

 contentersyle () {
  return 'largura: $ {this.containerwidth};
  Transform: TranslateX ($ {este
  .activesLideposition}); `

17. Vincular o Inline CSS

Adicione o snippet abaixo ao elemento 'C-app-carrossel__container' no modelo. Isso vinculará o valor retornado de 'contentersyle ()' da etapa anterior para o atributo 'estilo' do contêiner do carrossel, o que significa que seu CSS e, portanto, sua posição será automaticamente atualizada quando as coisas mudarem.

 V-liga: estilo = "contenterstyle" 

18. Conecte-se em setas próximas / anteriores

Precisamos agora adicionar lógica às setas próximas / anteriores para que o método correto da etapa 14 seja chamado quando cada seta respectiva é clicada. O snippet 'prevslide () pertence ao elemento' C-App-icon-arrow-prev ', enquanto' Nextslide () pertence ao elemento 'C-App-icon-arrow-shaw-shaw-shaw-shaw A diretiva 'V-ON' é uma maneira fácil de configurar os ouvintes do evento em Vue.js, com 'clique' sendo o evento DOM que estamos segmentando.

 // prev
V-On: Click.native = "Prevlide ()"
// Próximo
V-On: Click.native = "Nextslide ()" 

19. Gerar controles do carrossel

Vamos gerar os elementos de controle e fazê-los mostrar o deslize correspondente quando clicado. Adicione o elemento abaixo em 'C-app-carrossel__controls'. A diretiva 'V para' é usada para criar uma quantidade de elementos de controle que correspondam à variável 'slidetotal', enquanto a diretiva 'V-Bind' permite a classe 'is-ativa' somente quando o método 'isControlativo' da etapa 14 retorna verdade. Finalmente, estamos criando outro ouvinte de eventos através de 'V-On', quando clicado, o controle chama o método 'gooslide' e passa seu índice, que deve corresponder ao índice de slide correspondente.

 & lt; div v-for = "n em slidetotal"
: key = "n" v-link: classe =
"{'is-ativo': iscontrolativo (n)}"
classe = "c-app-carossel__control"
V-On: click = "gooslide (n - 1)" & gt; & lt; / div & gt; 

20. Componentes de importação

Vamos agora voltar para o componente de nível superior 'app.vue' e importar tudo. Logo após a abertura e lt; script & gt; tag, importar o componente '.VENE'. arquivos:

 Importar AppCarousel de '@ / components / app-carrossel / app-carrossel'
Importar AppCarouselesLide de '@ / components / app-carrossel-slide / app-carrossel-slide' 

Em seguida, altere o objeto 'Componentes', portanto, referencia esses componentes recém-importados.

 Componentes: {
   AppButton,
   AppCarousel,
   appcarouselslide.
} 

Finalmente, no & lt; estilo & gt; tag, Importe nosso novo SCS com o restante das importações de componentes.

 @Import "/ componentes / app-carrossel /
componente.app-carrossel ";
@Import "/ componentes / app-carrossel-slide /
componente.app-carrossel-slide "; 

21. Adicione carrossel e slides

Finalmente, vamos adicionar nosso novo componente de carrossel e alguns slides para o aplicativo principal. Ainda em 'app.vue', substitua o 'em construção' com o snippet abaixo. CADA & LT; APP-Carousel-Slide & GT; elemento representa um único slide. Adicione quantos quiser, substituindo o texto ou a imagem onde desejado. Incluído são 'test-photo-01.jpg' para 'test-photo-05.jpg'. Depois que acabar com a compilação, tudo deve funcionar agora. Huzzah!

& lt; app-carrossel & gt;
  & lt; app-carrossel-slide & gt;
  & lt; slot de modelo = "title" & gt; meu slide
  & lt; / template & gt;
  & lt; slot de modelo = "texto" & gt;
  & lt; p & gt; este é um slide de carrossel. & lt; / p & gt;
  & lt; app-button & gt; vamos & lt; / Botão de aplicativo & gt;
  & lt; / template & gt;
  & lt; slot img = "imagem"
  src = "./ ativo / img / test-photo-01.jpg"
  alt = "My Carhousel Photo" & GT;
  & lt; / app-carrossel-slide & gt;
& lt; / app-carrossel & gt; 

22. Adicione flexibilidade ao carrossel

Agora temos um carrossel Vue.js trabalhador, vamos adicionar alguma funcionalidade adicional para que possamos facilmente personalizar a duração da transição de slides, sua propriedade de tempo, declarando se os slides devem ser deslizantes automáticos e, em que frequência. Reopen 'App-Carousel.Vue' e adicione as propriedades no snippet abaixo para o objeto componente.

 adereços: {
  duração da transição: {
  Tipo: String,
  Padrão: '0.5s'
  },
  transitiming: {
  Tipo: String,
  Padrão: 'facilitar'
  }
} 

23. Emendar contentersyle ()

Os valores passados ​​para essas propriedades devem fazer o seu caminho para o css inline do carrossel de volta no passo 17. Agora vamos alterar a função computada 'contenterstyle' para garantir que isso aconteça.

 contentersyle () {
  return `largura: $ {this.containerwidth};
  transformar:
  translatex ($ {this.activeslideposition});
  Função de temporização de transição:
  $ {this.transittiming};
  duração da transição:
  $ {this.transitionduration}; `
} 

24. Passe dados para as propriedades do carrossel

O snippet abaixo ilustra como passaríamos dados para essas novas propriedades para o & lt; app-carrossel & gt; elemento em 'app.vue'. Uma vez adicionado, você deve ser capaz de passar os valores que desejar. Por exemplo, uma duração de "3.0s" resultaria em uma transição de slide muito lenta!

 & lt; app-carrossel
Transição-Duração = "0.25s"
TIMING-TIMING = "EASE-IN-OUT" & GT; 

25. Adicionando adereços de slide automático

Para o slide automático, precisamos adicionar dois objetos adicionais a 'adereços' em 'app-carrossel.vue'. 'Auto' é "verdadeiro" ou "falso", que corresponde a se o carrossel deve continuar a deslizar automaticamente. 'Autotiming' controla o tempo antes dos gatilhos de slides automático, com o valor padrão sendo 5000 milissegundos.

 Auto: {
  Tipo: String,
  Padrão: 'False'
},
Autotiming: {
  Tipo: String,
  Padrão: 5000.
} 

26. Inicie o Slide Automático

Agora precisamos iniciar o Slide automático na carga do componente. Na função 'montada () de carrossel, após o conteúdo existente, verifique se a propriedade' Auto 'é definida como' true '. Em caso afirmativo, crie um intervalo que desencadeia o método 'Nextslide ()' repetidamente, uma vez que o valor 'autotiming' passou.

 se (este.auto === 'verdadeiro') {
  este.Autointerval = setInterval (() = & gt; {
  este.Nextslide ();
  }, Parseint (este.Autotiming));
} 

27. Cancelar o método de slide automático

Obviamente, precisamos de alguma maneira para o usuário desabilitar o deslize automático se tiverem expressado um desejo de operar o carrossel manualmente. O primeiro passo para isso é um novo método de carrossel chamado 'cancelautoslide'. Isso simplesmente cancelará o intervalo criado na etapa anterior.

 cancelautoslide () {
   clearinterval (este.AuTointerval);
} 

28. Trigger cancelautoslide

Se o usuário clicar em um elemento de seta ou controle, é razoável supor que eles desejam operar manualmente o carrossel, então vamos chamar o método 'cancelautoslide' se algum desses elementos forem clicados. Para fazer isso, simplesmente adicione '+ cancelautoslide ()' a cada diretiva de elementos 'v-on'. Veja o snippet abaixo para um exemplo usando a seta de slides 'anterior'.

 V-ON: click.native = "prevslide () + cancelAutoslide ()" 

29. Passe os valores para os adereços de slide automático

Finalmente, vamos passar alguns valores para as propriedades de slides automaticamente que criamos. De volta em 'app.vue', adicione o trecho abaixo ao & lt; app-carrossel & gt; elemento para ativar um deslize automático a cada três segundos.

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

30. Termine a construção do componente do carrossel

Cancele o Servidor de Desenvolvimento ou abra uma nova janela de terminal e execute 'NPM Run Build' para criar uma versão compilada e pronta para produção do seu componente de carrossel movido ao VUE.JS no diretório 'dist'.

Este artigo foi originalmente publicado em questão 269 da revista Creative Web Design Web Designer. Comprar edição 269 aqui ou Inscreva-se no web designer aqui .

Evento Web Design. gerar Londres Retorna em 19-21 de setembro de 2018, oferecendo uma programação embalada de alto-falantes líderes da indústria, um dia inteiro de workshops e valiosas oportunidades de networking - não perca. Consiga seu gerar Bilhete agora .

Artigos relacionados:

• 7 Ferramentas essenciais para o web designer de hoje
• Adicione um efeito de falha ao seu site
• 6 incríveis 'sobre' páginas para inspirar você