<app-page-header [title]="'Carousel'" [title1]="'Carousel'" [activeitem]="'Advanced UI'" ></app-page-header> <!-- Start::row-1 --> <div class="grid grid-cols-12 gap-x-6"> <div class="col-span-12 lg:col-span-4"> <div class="box"> <div class="box-header"> <h5 class="box-title">Basic Swiper Slide</h5> </div> <div class="box-body"> <div class="swiper Swiperslide-1"> <div class="swiper-wrapper"> <swiper [slidesPerView]="1" (swiper)="setThumbsSwiper($event)" [zoom]="true" [autoplay]="true" [navigation]="false" [watchSlidesProgress]="true" > <ng-template swiperSlide *ngFor="let image of imageData; let i = index" > <div class="swiper-slide"> <img src="{{ image.src }}" alt="image" /> </div> </ng-template> </swiper> </div> </div> </div> </div> </div> <div class="col-span-12 lg:col-span-4"> <div class="box"> <div class="box-header"> <h5 class="box-title">Navigation Swiper Slide</h5> </div> <div class="box-body"> <div class="swiper mySwiper1"> <div class="swiper-wrapper"> <swiper [slidesPerView]="1" (swiper)="setThumbsSwiper($event)" [zoom]="true" [autoplay]="true" [navigation]="true" [watchSlidesProgress]="true" > <ng-template swiperSlide *ngFor="let image of imageData1; let i = index" > <div class="swiper-slide"> <img src="{{ image.src }}" alt="image" /> </div> </ng-template> </swiper> </div> </div> </div> </div> </div> <div class="col-span-12 lg:col-span-4"> <div class="box"> <div class="box-header"> <h5 class="box-title">Pagination Swiper Slide</h5> </div> <div class="box-body"> <div class="swiper mySwiper-page"> <div class="swiper-wrapper"> <swiper [slidesPerView]="1" (swiper)="setThumbsSwiper($event)" [zoom]="true" [autoplay]="true" [pagination]="true" [navigation]="false" [watchSlidesProgress]="true" [keyboard]="{ enabled: true }" [pagination]="{ clickable: true }" navigation > <ng-template swiperSlide *ngFor="let image of imageData2; let i = index" > <div class="swiper-slide"> <img src="{{ image.src }}" alt="image" /> </div> </ng-template> </swiper> </div> </div> </div> </div> </div> </div> <!-- End::row-1 --> <!-- Start::row-2 --> <div class="grid grid-cols-12 gap-x-6"> <div class="col-span-12 lg:col-span-4"> <div class="box"> <div class="box-header"> <h5 class="box-title">Pagination Progress Swiper Slide</h5> </div> <div class="box-body"> <div class="swiper mySwiper3"> <div class="swiper-wrapper"> <swiper [slidesPerView]="1" (swiper)="setThumbsSwiper($event)" [zoom]="true" [autoplay]="true" [navigation]="true" [watchSlidesProgress]="true" [pagination]="{ type: 'progressbar' }" navigation > <ng-template swiperSlide *ngFor="let image of imageData4; let i = index" > <div class="swiper-slide"> <img src="{{ image.src }}" alt="image" /> </div> </ng-template> </swiper> </div> </div> </div> </div> </div> <div class="col-span-12 lg:col-span-4"> <div class="box"> <div class="box-header"> <h5 class="box-title">Scrollbar Swiper Slide</h5> </div> <div class="box-body"> <div class="swiper mySwiper4"> <div class="swiper-wrapper"> <swiper [slidesPerView]="1" (swiper)="setThumbsSwiper($event)" [zoom]="true" [autoplay]="true" [pagination]="false" [navigation]="false" [watchSlidesProgress]="true" [scrollbar]="{ hide: true, }" > <ng-template swiperSlide *ngFor="let image of imageData5; let i = index" > <div class="swiper-slide"> <img src="{{ image.src }}" alt="image" /> </div> </ng-template> </swiper> </div> <div class="swiper-scrollbar"></div> </div> </div> </div> </div> <div class="col-span-12 lg:col-span-4"> <div class="box"> <div class="box-header"> <h5 class="box-title">Vertical Swiper Slide</h5> </div> <div class="box-body"> <div class="swiper mySwiper5 !h-[312px]"> <div class="swiper-wrapper"> <swiper [slidesPerView]="1" (swiper)="setThumbsSwiper($event)" [zoom]="true" [autoplay]="true" [navigation]="false" [watchSlidesProgress]="true" direction="vertical" [pagination]="{ clickable: true }" > <ng-template swiperSlide *ngFor="let image of imageData6; let i = index" > <div class="swiper-slide"> <img src="{{ image.src }}" alt="image" /> </div> </ng-template> </swiper> <div class="swiper-pagination"></div> </div> </div> </div> </div> </div> </div> <!-- End::row-2 --> <!-- Start::row-3 --> <div class="grid grid-cols-12 gap-x-6"> <div class="col-span-12 lg:col-span-6"> <div class="box"> <div class="box-header"> <h5 class="box-title">Space Between Swiper Slide</h5> </div> <div class="box-body"> <div class="swiper mySwiper6"> <div class="swiper-wrapper"> <swiper [slidesPerView]="6" (swiper)="setThumbsSwiper($event)" [zoom]="true" [autoplay]="false" [pagination]="false" [navigation]="false" [watchSlidesProgress]="true" > <ng-template swiperSlide *ngFor="let image of imageData7; let i = index" > <div class="swiper-slide"> <img src="{{ image.src }}" alt="image" /> </div> </ng-template> </swiper> </div> </div> </div> </div> </div> <div class="col-span-12 lg:col-span-6"> <div class="box"> <div class="box-header"> <h5 class="box-title">Free Mode Swiper Slide</h5> </div> <div class="box-body"> <div class="swiper mySwiper7"> <div class="swiper-wrapper"> <swiper [slidesPerView]="6" (swiper)="setThumbsSwiper($event)" [zoom]="true" [autoplay]="true" [navigation]="false" [watchSlidesProgress]="true" [pagination]="{ clickable: true }" > <ng-template swiperSlide *ngFor="let image of imageData8; let i = index" > <div class="swiper-slide"> <img src="{{ image.src }}" alt="image" /> </div> </ng-template> </swiper> </div> </div> </div> </div> </div> </div> <!-- End::row-3 -->