Angular: ng-bootstrap - вертикальная карусель с анимацией - PullRequest
0 голосов
/ 28 апреля 2019

Я бы хотел использовать Карусель ng-bootstrap с угловым 7, но я хочу использовать эту Карусель вертикально, а не горизонтально.Я прочитал все документы, но не знаю, как изменить стрелки и добавить эффект вертикального скольжения ...

Есть идеи?

Мой код:

посадка.component.ts

import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss'],
  providers: [NgbCarouselConfig]  // add NgbCarouselConfig to the component providers
})
export class LandingComponent implements OnInit {

  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.interval = 10000;
    config.wrap = true;
    config.keyboard = true;
    config.pauseOnHover = true;
    config.showNavigationArrows = true;
    config.showNavigationIndicators = false;
  }

  ngOnInit() {
  }
}

landing.component.html

<ngb-carousel>
  <ng-template ngbSlide>
    slide 1
  </ng-template>
  <ng-template ngbSlide>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam modi fugit similique architecto ipsam quia dignissimos ea veritatis expedita non deleniti culpa saepe maiores ad repellat quibusdam, minus, consequuntur magni!
  </ng-template>
  <ng-template ngbSlide>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, doloribus at tempora eligendi ipsam rerum id ab aspernatur iusto ducimus ratione consectetur corporis soluta dolor assumenda facere neque natus laboriosam!
  </ng-template>
</ngb-carousel>

Ответы [ 2 ]

0 голосов
/ 28 апреля 2019

Глядя на источник , кажется, что вертикальное вращение не вариант. Лучше всего было бы переопределить классы carousel-control-prev и carousel-control-next для центрирования и повернуть значки с классами значков carousel-control-next-icon & carousel-control-prev-icon.

0 голосов
/ 28 апреля 2019

Некоторые примеры: ЗДЕСЬ .

Один из примеров выглядит так:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
...