Setting custom navigation markers with css selector as parameter

[ZeroRWV]

Hi,

I'm trying to insert my own navigation markers, according to the swiperjs manuals for webcomponents (element). I have tried two approaches, but my rendered output lacks event listeners on the navigation markers to make my gallery move. Can someone tell me what I am missing? Much appreciated.

Approaach 1:

<swiper-container
                navigation-next-El= ".swiper-custom-button-next"
                navigation-prev-El= ".swiper-custom--button-prev"
                class="swiper" 
                slides-per-view="1.8" 
                navigation="true"
                loop="true"
>
<!---code for slides-->
</swiper-container>    
<button class="swiper-custom-button-prev"></button>
<button class="swiper-custom-button-next"></button>

Approach 2:

<swiper-container init="false" class="swiper" >
<!--code for slides-->
</swiper-container>
<button class="swiper-custom-button-prev"></button>
<button class="swiper-custom-button-next"></button>

<script>
 // swiper element
const swiperEl = document.querySelector('swiper-container');

// swiper parameters
const swiperParams = {
slidesPerView: 1.8,
navigation: true,
nextEl: '.swiper-custom-button-next',
prevEl: '.swiper-custom-button-prev',

on: {
    init() {
    // ...
    },
},
};

// now we need to assign all parameters to Swiper element
Object.assign(swiperEl, swiperParams);

// and now initialize it
swiperEl.initialize();

</script>

[ZeroRWV]

Okay, sorry for wasting your time. I found my mistake!

Correct syntax:

navigation: {
            nextEl: '.swiper-custom-button-next',
            prevEl: '.swiper-custom-button-prev',
            },