Отзывчивые изменения в ngx- bootstrap карусели - PullRequest
Новая
       35

Отзывчивые изменения в ngx- bootstrap карусели

3 голосов
/ 17 марта 2020

я учусь angular и сталкиваюсь с проблемой при создании адаптивного сайта в ngx- bootstrap carousal. Можно ли сделать отзывчивые изменения в карусели ngx- bootstrap? На главном экране я показываю 3 изображения для каждого просмотра, и я хочу показать только 1 изображение в мобильном представлении. Здесь я делюсь своим кодом. Код в testimonials.component. html

<carousel [itemsPerSlide]="itemsPerSlide" [singleSlideOffset]="singleSlideOffset" [interval]="false" [noWrap]="noWrap">
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
    <slide>
        <img src="../../../assets/images/user1.png">
    </slide>
</carousel>

Код в файле testimonials.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-testimonials',
    templateUrl: './testimonials.component.html',
    styleUrls: ['./testimonials.component.scss']
})
export class TestimonialsComponent implements OnInit {
    itemsPerSlide = 3;
    singleSlideOffset = false;
    noWrap = false;
    slidesChangeMessage = '';
    constructor() { }

    ngOnInit(): void {
    }
}

1 Ответ

5 голосов
/ 19 марта 2020

Проанализировав это некоторое время, я нашел решение, которое, как мне кажется, подойдет вам.

Что вам необходимо принять во внимание, так это то, что не прослушивает изменения в ширина экрана .

Это означает, что значение itemsPerSlide установлено на методе ngInit и никогда не обновляется снова (так как оно не требовалось в вашем вопросе). Когда вы загружаете страницу устройством с разрешением менее 480 пикселей, на слайдере показывается одно изображение, а если оно больше, оно показывает 3.

. Вы можете изменить точку останова, изменив значение в приватном свойстве mobileBreakpoint.

Давайте посмотрим, как будет выглядеть ваш пример: 

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-testimonials',
    templateUrl: './testimonials.component.html',
    styleUrls: ['./testimonials.component.scss']
})
export class TestimonialsComponent implements OnInit {
    itemsPerSlide = 3;
    singleSlideOffset = false;
    noWrap = false;
    slidesChangeMessage = '';

    private innerWidth: number;
    private mobileBreakpoint = 480;

    constructor() { }

    ngOnInit(): void {
      this.adjustsItemsPerSlide();
    }

  private adjustsItemsPerSlide() {
    this.innerWidth = window.innerWidth;
    if (this.innerWidth < this.mobileBreakpoint) {
      this.itemsPerSlide = 1;
    } else {
      this.itemsPerSlide = 3;
    }
  }
}
  • private innerWidth: number; содержит текущую ширину области просмотра. Используйте, чтобы решить, какое число itemsPerSlide будет использоваться.
  • private mobileBreakpoint = 480; содержит точку останова, в которой мы будем использовать 3 или 1 слайд.
  • private adjustsItemsPerSlide: этот метод будет считывать текущую ширину области просмотра и применять различные значения к this.itemsPerSlide.

. Я также создаю пример для stackblitz , который показывает желаемый эффект.

PS : если вы используете универсальный, это не сработает, и вам нужно будет внедрить windowsService вместо использования объекта windows (который является собственным объектом windows браузера, а не angular сервисом) прямо в компоненте.

Надеюсь, это поможет:)

...