Существует ссылка для каждого содержимого карусели, когда вы нажимаете на элемент / содержимое, оно переходит на эту страницу. При возвращении на домашнюю страницу содержимое карусели перекрывается.
HTML:
<owl-carousel-o [options]="customOptions" (dragging)="isDragging = $event.dragging" #owlCar class="text-center">
<ng-template carouselSlide [width]="1200">
<button mat-mini-fab class="btn-shadow first" [owlRouterLink]="['/courses']">5</button>
</ng-template>
<ng-template carouselSlide [width]="1200">
<button mat-mini-fab class="btn-shadow second" [owlRouterLink]="['job-offers']">25</button>
</ng-template>
<ng-template carouselSlide [width]="1200">
<button mat-mini-fab class="btn-shadow third" [owlRouterLink]="['/contacts']">20</button>
</ng-template>
</owl-carousel-o>
TS:
export class SliderComponent implements OnInit {
isDragging: boolean;
customOptions: any = {
loop: true,
navClass: ['owl-prev', 'owl-next'],
items: 3, // THIS IS IMPORTANT
autoWidth: false,
nav: false,
slideBy: '3',
dots: false,
center: true,
lazyLoad: true,
scrollPerPage: true,
responsive: {
480: {
items: 3
},
600: {
items: 3
},
900: {
items: 3
},
1024: {
items: 3 // from 768 screen width to 1024 8 items
}
},
}
ngOnInit() {}
}
Содержимое не должно перекрываться при переключении с одной страницы на другую.
На изображении видно, что предметы сова-карусели перекрываются.