Estoy tratando de código de un carrusel/slider con Angular 2. Idea en mi mente, tengo un array de imágenes,

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"
    }
  ];
}

Quiero bucle a través de la imagen de la matriz y reemplazar la imagen de fondo de un div con el valor actual de {{images.image}}.

He puesto un contador,

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

y el destino div sería algo como

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

</div>

¿Cómo puedo lograr esto? No quiero usar bootstrap o jQuery, pero simplemente Angular2, gracias por la ayuda.

  • «¿Cómo puedo lograr esto?» es una pregunta apropiada para ESO. La respuesta es: escribir el código y la figura hacia fuera.
  • Yo no puedo empezar porque no tengo ni idea de qué hacer. Siempre han utilizado jQ. Gracias por el comentario.
  • Entonces usted aún no están listos para una pregunta sobre el Desbordamiento de la Pila. Ir y leer algunos tutoriales, así que un poco de investigación, probar cosas.
  • Sus Angular 2 y es todavía en rc6 que no tiene ninguna buena/(al menos uno) tutoriales en carrusel!
  • Eso es lamentable, pero aún no es una pregunta apropiada. Tal vez una vez que la figura hacia fuera puede ser el que escribe que la falta de tutorial?
  • stackoverflow.com/questions/37982356/… Ver a esta respuesta

InformationsquelleAutor Rivadiz | 2016-09-28

3 Comentarios

  1. 1

    Como este:

    <div class="slider__home" [style.background]="'url('+ image +')'">
    
    </div>
    • ¿Cómo puedo bucle a través de la lista? *ngFor parece inservible aquí!
  2. 1

    Puede utilizar bootstrap carrusel como este:

    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>

    carrusel.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];
        }
    }
  3. 0

    He escrito una respuesta para esta pregunta que es similar a su pregunta.

    Si quieres aprender cómo crear un control deslizante de contenidos desde cero, aquí por el blog, es bien explicado. Usted será capaz de crear un poquito de peso deslizante en pura angular 2 y css, y será tan sencillo como en el siguiente ejemplo de uso.

    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(){
          }
    }

Dejar respuesta

Please enter your comment!
Please enter your name here