Пользовательское позиционирование стрелки карусели с использованием ng-bootstrap и Angular - PullRequest
Новая
       7

Пользовательское позиционирование стрелки карусели с использованием ng-bootstrap и Angular

0 голосов
/ 20 февраля 2019

Мое намерение состоит в том, чтобы поместить значок prev и next чуть ниже содержимого карусели.
Прежде всего, чтобы отредактировать css для ng-bootstrap, мне пришлось установить инкапсуляцию в ViewEncapsulation.None (есть ли лучший подход?),Несмотря на то, что это не лучший способ, я смог изменить значок и т. Д. Я попытался расположить стрелки, используя поле, которое заставляло их исчезать / постоянно уменьшаться.

Кто-нибудь когда-либо сталкивался с такой же проблемой или знает лучший подход в целом?

На случай, если вы заинтересованы в файле stackblitz.com (не смогдобавьте мою текущую настройку стрелки): https://stackblitz.com/edit/angular-ng-bootstrap-demo-guejbq?embed=1&file=styles.css

Ниже я сообщу вам свой код:
HTML: 


<div class="container-fluid">
  <div class="row">
    <div class="col-2 justify-content-center align-self-center p-0">
      <div class="progress rotate">
        <div class="progress-bar active progress-bar-custom" role="progressbar" [style.width.%]="currentPercentage" [attr.aria-valuenow]="currentPercentage" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>


    <div class="col-10">
      <ngb-carousel *ngIf="images" (slide)="changeProgress($event)">
        <ng-template ngbSlide>
          <img [src]="images[0]" alt="First slide" class="encImage">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[1]" alt="Second slide" class="encImage">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[2]" alt="Third slide" class="encImage">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[3]" alt="Fourth slide" class="encImage">
        </ng-template>
      </ngb-carousel>
    </div>
  </div>
</div>


CSS: 

.encImage {
  max-width: 100%;
  height: auto;
}

.rotate {
  transform: rotate(270deg);
  background-color: #1F1F1F;
  height: 3px;
  width: 125%;
}

.progress-bar-custom {
  background-color: white;
}

.carousel-control-prev-icon {
  background-image: url('../../../assets/images/arrow.svg') !important;
  height: 40px;
  width: 40px;
}

.carousel-control-next-icon {
  background-image: url("../../../assets/images/arrow.svg") !important;
  height: 40px;
  width: 40px;
  transform: rotate(180deg);
}


TS: 

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

import {NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [NgbCarouselConfig]
})
export class CarouselComponent implements OnInit {

  public currentSlide: number;
  public currentPercentage: number = 25;

  images = ['assets/images/image1.jpeg', 'assets/images/image2.jpeg', 'assets/images/image3.jpeg', 'assets/images/image4.jpeg'];

  changeProgress(event: any): void {
    this.currentSlide = Number(event.current.substring(10));
    this.currentPercentage = (this.currentSlide + 1) / this.images.length * 100;
  }

  constructor(config: NgbCarouselConfig) {
    config.showNavigationIndicators = false;
  }

  ngOnInit() {
  }

}
...