How to use custom navigation on webcomponent swiper?

[fdverwoerd]

The webcomponent documentation says there are only 2 parts, swiper-container and swiper-slide. But In 'normal' swipers you wrap the slides inside .swiper-wrapper div.

How can I add custom navigation and make sure the navigation is not part of the 'slides' div? What am i missing?

<div class="location-swiper-wrapper">
    <swiper-container ref="locationSwiper" slides-per-view="4" speed="500" loop="true" css-mode="true" :space-between="20" :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }">

      <swiper-slide v-for="location in locations">
        <div class="location-card" :class="{'active-location': location.visibility}">
          <h3>{{location.title}}</h3>
          <a :href="location.url" class="button theme-6 type-solid size-normal">Ontdek locatie</a>
        </div>
      </swiper-slide>

      ... If put it here the arrows work but its part of the slides wrapper?


    </swiper-container>
    <div class="chevron-navigation">
      <button class="swiper-button-prev">
        <svg><use href="#svg_chevron_left"></use></svg>
      </button>
      <div class="chevron-pagination"></div>
      <button class="swiper-button-next">
        <svg><use href="#svg_chevron_right"></use></svg>
      </button>
    </div>
  </div>

[richardaubin]

https://swiperjs.com/element#parameters-as-attributes

<swiper-container 
   ref="locationSwiper" 
   slides-per-view="4" 
   speed="500" 
   loop="true" 
   css-mode="true" 
   space-between="20" 
   navigation-next-el=".swiper-button-next" 
   navigation-prev-el=".swiper-button-prev">

Based off the docs, it should probably work with something like the above... Haven't tried it.

[soyalexrc]

Hi there!, i am also using swiper via Web Component, in an angular application, i'll share with you the solution i did, so it may help for custom arrows navigation!

1. On the tag for <swiper-container> i added an id #swiperEl

<swiper-container #swiperEl [attr.slides-per-view]="slidesPerView" pagination="true" loop="true"></swiper-container>
2. Outside of the <swiper-container> i added two <div> tags with id for the buttons:

`<div #prevBtn>

`

3. Since i am using Angular framework, i needed to declare the variables to point to the id's to interact with the native html

@ViewChild('swiperEl', { static: false }) swiperEl!: ElementRef; @ViewChild('prevBtn', { static: false }) prevBtn!: ElementRef; @ViewChild('nextBtn', { static: false }) nextBtn!: ElementRef;

4. And for the final step i just declare navigation this way:

`
ngAfterViewInit() {
// Wait for the Swiper web component to be initialized
const swiper = this.swiperEl.nativeElement;

// Ensure Swiper is ready before adding navigation
swiper.initialize();

swiper.navigation = {
  nextEl: this.nextBtn.nativeElement,
  prevEl: this.prevBtn.nativeElement,
};

}
`

I Hope this can help someone!

[ilovewebpl]

I have fixed it like that:

ngAfterViewInit() { setTimeout(() => { const swiperEl = this.swiperEl.nativeElement; const swiperInstance = swiperEl.swiper; if (swiperInstance) { swiperInstance.params.navigation.nextEl = this.nextBtn.nativeElement; swiperInstance.params.navigation.prevEl = this.prevBtn.nativeElement; swiperInstance.navigation.init(); swiperInstance.navigation.update(); } }, 100); }