旋转木马/滑块与角2从头

我想的是，我有图像的阵列在我脑海中代码角度2想法传送带/滑块，旋转木马/滑块与角2从头

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

我在想循环图像数组并替换当前值为{{images.image}}的div的背景图像。

我已经设置了计数器，

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

和目标div看起来像

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

</div>

如何实现这一目标？我不想使用引导程序或jQuery，但只是简单的Angular2，感谢任何帮助。

来源

2016-09-28 Rivadiz

*“我该如何做到这一点？”*对于SO来说并不合适。答案是：你编写一些代码并找出它。 – jonrsharpe

@jonrsharpe我无法开始，因为我不知道该怎么做。总是使用jQ。感谢您的评论。 – Rivadiz

然后你还没有准备好堆栈溢出的问题。去读一些教程，所以一些研究，尝试一下。 – jonrsharpe

像这样：

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

</div>

来源

2016-09-28 22:29:08 VRPF

如何循环访问列表？ '* ngFor'在这里似乎不可用！ – Rivadiz

您可以使用引导旋转木马是这样的：

的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>

carousel.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]; 
    } 
}

来源

2016-10-06 07:30:05

我刚刚写了一个与this question类似的问题的答案。

如果您想要了解如何从头开始创建内容滑块，请参阅here on by blog，这很好解释。您将能够以纯角度2和css创建一个轻量级滑块，它将如下面的示例一样简单。

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

来源

2017-03-21 15:27:24

旋转木马/滑块与角2从头

回答

相关问题