I create a swiper slide. Slides works well but i want to navigate slide with custom buttons. I just try something. Like:
<swiper #selectArtSlider [slidesPerView]="'auto'" [spaceBetween]="15" [observeParents]="'true'"
[navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }"
>
<ng-template swiperSlide >
<div class="select-art-wrapper active" (click)="selectArt($event)">
<div class="jar">
<img src="/assets/img/art-jar-1.png" alt="Nutella" />
</div>
<div class="board">
<img src="/assets/img/art-board-4.jpg" alt="Nutella" />
</div>
<div class="select">
<label for="art-1">Etiketi Seç</label>
<div class="custom-checkbox">
<input type="checkbox" id="art-1">
<label for="art-1"><i class="fas fa-check"></i></label>
</div>
</div>
</div>
</ng-template>
</swiper>
<div class="swiper-actions d-flex justify-content-end">
<button type="button" class="swiper-navigation-prev btn btn-actions btn-border btn-border-hoverless mr-1" (click)="slidePrev()"><</button>
<button type="button" class="swiper-navigation-next btn btn-actions " (click)="slideNext()">></button>
</div>
I see that code in https://stackblitz.com/edit/swiper-angular-example-12hed8?file=src%2Fapp%2Fapp.component.html
When it's not working i try someting like this
import SwiperCore, {
Navigation,
Pagination,
Scrollbar,
A11y,
Virtual,
Zoom,
Autoplay,
Thumbs,
Controller
} from "swiper/core";
// install Swiper components
SwiperCore.use([
Navigation,
Pagination,
Scrollbar,
A11y,
Virtual,
Zoom,
Autoplay,
Thumbs,
Controller
]);
@ViewChild("selectArtSlider") slide: SwiperCore;
slidePrev() {
this.slide.slidePrev(.3, false);
}
slideNext() {
this.slide.slideNext(.3, false);
}
It's still doest work. Please help