Angular swiper manual next slide

Viewed 1446

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()">&lt;</button>
    <button type="button" class="swiper-navigation-next btn btn-actions  " (click)="slideNext()">&gt;</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

2 Answers

You should remove the click event bindings from your custom buttons. I had the same issue, but since you set the navigation binding with the correct button class names to prevEl and nextEl, it should work without needing to add another click method and it will just use the built-in methods.

I am using Angular 13.1.1, this works for me:

In your HTML add the #gallery reference in your Swiper

<swiper #gallery [config]="swiperConfig">

In your component.ts add:

import { SwiperComponent } from 'ngx-useful-swiper';

@ViewChild('gallery', { static: false }) gallery: SwiperComponent | undefined;

And in the method you want to call for actions use one of this for prev and next slide:

this.gallery?.swiper.slidePrev();
this.gallery?.swiper.slideNext();
Related