![](/img/trans.png)
[英]Adding carousel slider to woocommerce shop page (not single product page)
[英]Show multi images in a single slider page using ngb-carousel
我正在使用Angular 6和ng-bootstrap並嘗試使用輪播。
輪播工作正常,但無法在一個滑塊中顯示4張圖像。 在每個滑塊中顯示1張圖像。
這是通過API響應傳來的數據:
games= [{"title_id":1,"title_name":"MIssion Impossible","title_img":"https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"}]},{"title_id":2,"title_name":"Matrix","title_img":"https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"},{"id":6,"name":"Fantasy"}]},{"title_id":3,"title_name":"Avengers","title_img":"http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"},{"id":6,"name":"Fantasy"}]},{"title_id":4,"title_name":"Stargate SG-1","title_img":"https://image.tmdb.org/t/p/w300_and_h450_bestv2/rst5xc4f7v1KiDiQjzDiZqLtBpl.jpg","genres":[{"id":1,"name":"Action"},{"id":5,"name":"Drama"},{"id":2,"name":"Adventure"},{"id":9,"name":"Sci Fi"}]},{"title_id":5,"title_name":"Scooby Doo","title_img":"https://images-na.ssl-images-amazon.com/images/G/01/aplusautomation/vendorimages/1cdd3ea2-f14f-416b-9aaa-644a9a01ad8c.jpg._CB321085566_.jpg","genres":[{"id":1,"name":"Action"},{"id":10,"name":"Thriller"},{"id":6,"name":"Fantasy"}]}];
這是我的component.html代碼:
<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let image of games" style="">
<div class="" style="">
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-6">
<img class="" src="{{image.title_img}}" width="" >
</div>
</div>
</ng-template>
</ngb-carousel>
每張幻燈片的每張圖片都來了。
我嘗試使用以下靜態圖片,
<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide style="">
<div class="">
<img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
<img src="https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg" width="200px" class="img-responsive" style="float:left">
<img src="http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg" width="200px" class="img-responsive" style="float:left">
</div>
</ng-template>
<ng-template ngbSlide style="">
<div class="">
<img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
<img src="https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg" width="200px" class="img-responsive" style="float:left">
<img src="http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg" width="200px" class="img-responsive" style="float:left">
</div>
</ng-template>
</ngb-carousel>
但是,在移動設備中,顯示的數字低於1。 我只需要顯示一張圖像,單擊箭頭導航時應顯示下一張圖像
這是一種可能的解決方案:
單獨的台式機和移動版:
將桌面版本與移動版本分開,每個版本都有一個ngb輪播,並通過* ngIf選擇。 * ngIf檢查定義的變量mobile
,(請參見下面的html):
ngOnInit() {
if (window.screen.width === 360) { // 768px portrait
this.mobile = true;
}
}
有關此問題的更多信息。
滑桿
對於移動版本,請使用您的代碼(我在下面進行了集成)
對於具有多個圖像的桌面:
將您的數組划分為多維數組(第一維用於幻燈片,第二維用於圖像)。 如果您有2張包含3張圖片的幻燈片,則您的數組將是2 * 3的一張。
this.games = ["a", "b", "c", "d", "e"];
this.gamesFormatted = [];
var j = -1;
for (var i = 0; i < this.games.length; i++) {
if (i % 3 == 0) {
j++;
this.gamesFormatted[j] = [];
this.gamesFormatted[j].push(this.games[i]);
}
else {
this.gamesFormatted[j].push(this.games[i]);
}
}
顯示帶有雙環的輪播:
<div *ngIf="games">
<!-- Mobile section : one image per slide -->
<ngb-carousel *ngIf="mobile" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let image of games">
<div class="" style="">
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-6">
<img class="" src="{{image.title_img}}">
</div>
</div>
</ng-template>
</ngb-carousel>
<!-- Desktop section : multiple images per slide -->
<ngb-carousel *ngIf="!mobile" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let group of gamesFormatted">
<div class="" style="" *ngFor="let game of group">
<img class="" src="{{game.title_img}}">
</div>
</ng-template>
</ngb-carousel>
</div>
我沒有測試html部分,因此肯定有待改進。
你有沒有這樣嘗試過:
`<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide style="">
<div class="">
<img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
</div>
<div class="">
<img src="https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg" width="200px" class="img-responsive" style="float:left">
</div>
<div class="">
<img src="http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg" width="200px" class="img-responsive" style="float:left">
</div>
</ng-template>
</ngb-carousel>
`
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.