Когда я загружаю или обновляю sh свою страницу, адаптивный код карусели не работает. Он работает только после нажатия на любую ссылку на странице - PullRequest
Новая
       102

Когда я загружаю или обновляю sh свою страницу, адаптивный код карусели не работает. Он работает только после нажатия на любую ссылку на странице

0 голосов
/ 09 июля 2020

Это код в файле HTML: 

     <owl-carousel-o [options]="customOptions">
        <ng-template carouselSlide *ngFor="let service of services | sort : 'Ranking'">
          <div (click)="selectedService=service.index" class="service-block" [ngClass]="{'active-service': selectedService==service.index}">
              <img [src]="service.Picture"/>
              <p class="font-fam">{{service.Name}}</p>
          </div>
        </ng-template>            
      </owl-carousel-o>

И это код в файле ts: 

  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: true,
    dots: false,
    navSpeed: 700,
    navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
    responsive: {
      0: {
        items: 4
      },
      400: {
        items: 4
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      },
    },
    nav: true
  }

Проблема в том, что когда страница загружен, адаптивная функция не работает должным образом. Но я нажимаю на любую ссылку на странице, а затем нажимаю кнопку «назад», отзывчивый код снова работает.

Вы видите это последнее изображение в карусели, которое частично показано? Он не должен так отображаться

Он должен отображаться так. Где изображения сжимаются до одинаковой ширины и соответственно умещаются, но это происходит только тогда, когда я нажимаю на ссылку и нажимаю «назад» на go обратно на страницу.

...