Слайдер карусели отображает один элемент в angular4

Работая в этом проекте над Angular4, я использовал карусель для отображения продуктов. Продукты привязываются из ответа API.

В моей карусели я отображаю продукты в формате одной строки с 3 столбцами. Если API возвращает 10 продуктов, 10-й продукт отображается на одном слайде.

Я хочу объединить 10-й продукт с 1-м и 2-м продуктом, а затем отобразить его как слайд с 3 столбцами.

HTML

<div class="col-sm-9">
                <section class="container">
                    <div class="row">
                        <div class="col-sm-1">
                            <i class="fa fa-user" style="font-size:25px"></i>
                        </div>
                        <div class="col-sm-9">
                            <h5>Popular Products</h5>
                        </div>
                    </div>
                </section>
                <hr>
                <section class="carousel slide" id="myCarousel">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12 text-right mb-4">
                                <a class="btn btn-outline-secondary carousel-control left" href="#myCarousel" data-slide="prev" title="go back">
                                    <i class="fa fa-lg fa-chevron-left"></i>
                                </a>
                                <a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next" title="more">
                                    <i class="fa fa-lg fa-chevron-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="container p-t-0 m-t-2 carousel-inner">
                        <div class="row row-equal carousel-item {{ i == 0 ? 'active' : '' }} m-t-0" *ngFor="let chunkProducts of productData;let i =index;">
                            <div class="col-sm-4" *ngFor="let slider of chunkProducts;">
                                <div class="card">
                                    <div class="card-img-top card-img-top-250 one">
                                        <img class="img-fluid" [src]="slider['PRODUCT_IMAGE']" alt="Carousel 1">
                                        <img routerLink="/my-cart" class="img-fluid two" [src]="slider['PRODUCT_IMAGE_ONHOVER']" alt="Carousel 1">
                                    </div>
                                    <div class="card-block pt-2">
                                        <div class="col-sm-12 text-center card-text">
                                            <span>{{slider.PRODUCT_NAME}}</span>
                                            <br>
                                            <input type="hidden" value="{{slider.PRODUCT_ID}}" #Pname1>
                                            <br>
                                            <span>{{slider.PRODUCT_PRICE}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

Это мой html-файл для отображения слайда в формате 3 столбца.

Составная часть

 ngOnInit() {
    this.CartdataService.get_New_Products().subscribe(
      data => {
          this.productData = this.chunks(data,3);
          console.log(this.productData);
      });

chunks(array, size) {
    let results = [];
    results = [];
    while (array.length) {
      results.push(array.splice(0, size));
    }
    return results;
  }
2
0
792
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто измените:

this.CartdataService.get_New_Products().subscribe(data => {
    this.productData = this.chunks(data.json(),3);

    let last = this.productData[this.productData.length-1].length;
    if(this.productData.length > 1 && last < 3) {
        this.productData[this.productData.length-1] = [ ...this.productData[this.productData.length-1] , ...this.productData[0].slice(0, 3-last) ];
    }

});

РАБОЧАЯ ДЕМО

В частности, почему вы сохранили три точки this.productData [this.productData.length-1] = [... this.productData [this.productData.length-1], ... this.productData [0] .slice (0) , 3-последняя)]; в этой строке

Nikson 11.04.2018 12:22

Это оператор распространения es6, я использовал для объединения массива

Vivek Doshi 11.04.2018 12:23

Хорошо, спасибо за уделенное время.

Nikson 11.04.2018 12:24
stackoverflow.com/questions/49938614/… не могли бы вы помочь мне в этом вопросе
Nikson 20.04.2018 11:41

Привет, я пробовал это в своем проекте, и он работает нормально, но я сталкиваюсь с проблемой, когда минимизирую экран, на котором отображаются 3 продукта один за другим, но мне нужно показать это в отдельных продуктах. Я имею в виду, что в веб-представлении он должен быть как слайд 3 продуктов, а в мобильной версии он должен быть как один слайд продукта. Можно ли сделать ... Могу я, пожалуйста, помочь мне получить этот @VivekDoshi

Zhu 30.07.2018 06:17

@Zhu, это должно быть предоставлено плагином, если он этого не обеспечивает, тогда я не могу вам помочь

Vivek Doshi 30.07.2018 06:24

Я думаю, вы неправильно поняли мои слова, пожалуйста, откройте свое решение этого сообщения и в stackblitz просмотрите результат в опции «Открыть в новом окне», теперь вы можете увидеть ползунок в веб-представлении (во весь экран), теперь просто сверните экран, чтобы минимальный размер экрана, вы можете видеть продукты, которые будут отображаться один под одним. Я хочу изменить его так, чтобы он выглядел как один слайд, например: если 10 продуктов в слайде должны отображаться как 10 отдельных слайдов, а не в (3 + 3) слайдах . Надеюсь, вы понимаете мою потребность. Помогите мне, если знаете, как это сделать @VivekDoshi

Zhu 30.07.2018 06:30

@ Чжу, извини, я не знаю

Vivek Doshi 30.07.2018 06:49

Другие вопросы по теме