Carrousel/Slider Angulaire 2 à partir de zéro

Je suis en train de coder un carrousel/slider Angulaire 2. Idée dans mon esprit, j'ai un tableau d'images,

export class AppComponent {
  title = 'app works!';

  images: Array<any> = [
    {
      image: "1.jpg"
    },
    {
      image: "2.jpg"
    },
    {
      image: "3.jpg"
    },
    {
      image: "4.jpg"
    },
    {
      image: "5.jpg"
    },
    {
      image: "6.jpg"
    }
  ];
}

Je veux boucle à travers l'image de tableau et de remplacer l'image d'arrière-plan d'un div avec la valeur actuelle de {{images.image}}.

J'ai mis en place un compteur,

public subscription: any;
public time: any;
ngOnInit() {
  let timer = TimerObservable.create(1000,5000);
  this.subscription = timer.subscribe(t=>{
    this.time = t;
  })
}

et la cible div ressemblerait à quelque chose comme

<div class="slider__home" style="background: url({{image}})">

</div>

Comment puis-je y parvenir? Je ne veux pas utiliser bootstrap ou jQuery, mais tout simplement Angular2, merci pour toute aide.

  • "Comment dois-je faire?" n'est pas une question de la SORTE. La réponse est: vous écrire un peu de code et de le comprendre.
  • Je ne peux pas commencer car je n'ai pas la moindre idée de quoi faire. Toujours utilisé jQ. Merci pour le commentaire.
  • Vous n'êtes pas encore prêt pour une question sur un Débordement de Pile. Aller lire quelques tutoriels, de sorte que certains de la recherche, de tester des choses.
  • Son Angulaire 2 et il est toujours sur rc6 qui n'a pas un bon/(au moins un), des tutoriels sur carrousel!
  • C'est malheureux, mais toujours pas une bonne question. Peut-être une fois que vous comprenez cela, vous pouvez être celui qui écrit cette absence de tutoriel?
  • stackoverflow.com/questions/37982356/... Voir cette réponse

InformationsquelleAutor Rivadiz | 2016-09-28
  1. 1

    Comme ceci:

    <div class="slider__home" [style.background]="'url('+ image +')'">

</div>
    • Comment faire une boucle sur la liste? *ngFor semble inutilisable ici!
    InformationsquelleAutor VRPF
  2. 1

    Vous pouvez utiliser bootstrap carrousel comme ceci:

    index.html

    <html>
    <head>
        <!-- Insert all css data here -->
    </head>
    <body>
        <carousel></carousel>

        <!-- Insert all needed scripts here -->
        <script>
            System.import('carousel.js');
        </script>
    </body>
</html>

    carousel.html

    <div id="carousel-generic" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div *ngFor="let url of urls" class="item" [ngClass]="{active: isActive(url)}">
            <img src="{{url}}" alt="{{url}}">
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

    carrousel.ts

    //<reference path="jquery.d.ts" />
//<reference path="boodstrap.d.ts" />

import {Component} from '@angular/core';
import {Http} from '@angular/http';

@Component({
    selector: "carousel",
    templateUrl: 'carousel.html'
})

export class CarouselComponent {
    private start = false;
    urls = [];
    constructor(http: Http) {
            http.get('/getcarousel')
                .subscribe(res => this.startCarousel(res.json()));        
    }

    startCarousel(urls: string[]) {
        this.urls = urls;
        $('.carousel').carousel();
    }

    isActive(url: string) {
        return url === this.urls[0];
    }
}
    InformationsquelleAutor Shailesh kala
  3. 0

    J'ai juste écrit une réponse pour cette question qui est similaire à votre question.

    Si vous voulez apprendre comment créer un curseur à partir de zéro, ici, sur par blog, c'est bien expliqué. Vous serez en mesure de créer une lumière poids curseur dans la pure angulaire 2 et css, et ça sera aussi simple que l'exemple suivant en cours d'utilisation.

    typescript
 @Component({
        selector: 'ImageShow',
        template: `
        <contentSlider [slides]="images"></contentSlider>
        `
    })
    export class ImageShowComponent implements  AfterViewInit{
       images:Array<any> = [{"sType":"img","imgSrc":"..."},{"sType":"div","content":"...Hello It's slidable content"}];
      constructor(){
      }
}
    InformationsquelleAutor Ravinder Payal