Bs Slide Angular

Slide Dinâmico - Angular 6x.

bs-slide-agular é um componente de slideshow leve para aplicativos Anguar 6x e totalmente configurável.

Características

• Reprodução automática
• Botões de navegação

Exemplo

• demo

Instalação

OS X & Linux:

npm i bs-slide-angular-agencia-cria-mais --save

Windows:

npm i bs-slide-angular-agencia-cria-mais --save

Dependências

npm i jquery --save

• importe o jquery globalmente em seu app projeto;
• angular.json

...,
"scripts": [
   ...,
  "node_modules/jquery/dist/jquery.min.js"
]         

• importe o BsSlideAngularAgenciaCriaMaisModule para o seu app.module;

@NgModule({
  imports: [
    ...,
    BsSlideAngularAgenciaCriaMaisModule
  ],
  ...
})
class YourModule { ... }

• use <bs-slide-angular-agcm></bs-slide-angular-agcm> em seus templates.

<bs-slide-angular-agcm [slideImages]="slideImages" [options]="options"></bs-slide-angular-agcm>

Configuração

@Input

• slideImages: any[] - Uma matriz de objetos que contém o URL e as legendas da imagem.
• options: {} - Objeto com valores de configuração para os slides com o formato abaixo.

slideImages = [
    {
      image: '/assets/images/image3.jpeg', //caminho para a imagem
      title: 'Legenda' //legenda para imagem,
      url: '#'
    }
]

Exemplo: 
options = {
       dots: true,
       autoplay: true,
       autoplayTimeout: 4000,
       smartSpeed: 1200,
       autoplayHoverPause: true,
       lazyLoad: true,
       loop: true,
       nav: false,
       items: 4
       responsive: {
           0: {
               items: 1
           },
           500: {
               items: 2
           },
           992: {
               items: 3
           },
           1300: {
               items: 4,
               autoplay: true,
           }
       }
   }

Documentação owCarousel2

owCarousel2

Ajude a melhorar

Encontrou um bug ou um problema? Open a new issue GitHub.

Contribuindo para este projeto

GitHub

Autor

@JeanPaul – [email protected]