настроить карусель ng-bootstrap? - PullRequest
Новая
       7

настроить карусель ng-bootstrap?

0 голосов
/ 02 декабря 2018

Я пытаюсь настроить Карусель ng-bootstrap таким образом, чтобы каждый слайд шел снизу, и это не было автоматическим изменением слайдов.Предполагается, что слайды идут с анимацией.Еще одна вещь, которую я хочу сделать, это то, что слайд будет меняться при прокрутке мыши.Я использую угловой 6.

Вот код, который у меня есть: 

<ngb-carousel *ngIf="images"> 
    <ng-template ngbSlide> 
        <img [src]="images[0]" alt="Random first slide"> 
        <div class="carousel-caption"> 
           <h3>10 seconds between slides...</h3> 
               <p>This carousel uses customized default values.</p> 
        </div> 
    </ng-template>

1 Ответ

0 голосов
/ 11 декабря 2018

Давайте рассмотрим 3 вещи, которые вы хотите сделать по очереди ...

1.Анимировать так, что слайды идут снизу

Для этого вы можете добавить следующий CSS к вашему компоненту, который содержит ngb-carousel: 

::ng-deep .carousel-item {
  display: block !important;
  position: absolute;
  transform: translateY(100%);
  opacity: 0;
  transition:all  1s;
}

::ng-deep .carousel-item.active {
  position: relative;
  transform: translateY(0);
  opacity: 1;
  top: 0;
}

Вы должны быть в состоянии настроитьCSS, пока вы не получите нужную анимацию.

Предупреждение: Angular планирует отказаться от /deep/, >>> и ::ng-deep, однако вы должны иметь возможность использовать::ng-deep на данный момент:

Пронзающий теневой комбинатор устарел, и поддержка удалена из основных браузеров и инструментов.Таким образом, мы планируем отказаться от поддержки в Angular (для всех 3 of / deep /, >>> и :: ng-deep).До тех пор :: ng-deep следует предпочитать для более широкой совместимости с инструментами.

source: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

2.Отключить автоматическую смену слайдов

Установите для свойства interval ngb-carousel значение false - обычно это числовое значение (количество миллисекунд, в течение которого каждый слайд отображается), но его установкаfalse отключит автоматическое слайд-шоу. 

<ngb-carousel *ngIf="images" [interval]="false" #carousel></ngb-carousel>

3.Изменить слайд при прокрутке мыши

Добавьте следующий @HostListener в ваш компонент.Он прослушивает событие прокрутки мыши и выполняет код в функции scroll(), когда обнаруживает событие.Приведенный ниже код загружает предыдущий слайд при прокрутке вниз и следующий слайд при прокрутке вверх.Измените event.wheelDelta < 0 на event.wheelDelta > 0, если хотите наоборот. 

@HostListener('mousewheel', ['$event'])
  scroll() { 
    if (event.wheelDelta < 0) {
      this.carousel.prev();
    } else {
      this.carousel.next();
    }
  }

Чтобы это сработало, вам нужно объявить ngb-carousel как переменную, чтобы вы могли получить к ней доступ вмашинописный текст для вызова next() и prev():

HTML 

<ngb-carousel *ngIf="images" [interval]="false" #carousel>

машинописный текст 

@ViewChild('carousel')
carousel: any;

Пожалуйста, смотрите этот StackBlitz для рабочего демо.

...