My requirement is to change the left and right navigation arrow color to white then add rounded black background to it.

By using below code, navigation size and arrow color got changed to white, but unable to change the arrow background color to rounded black

Added in App.vue

<template>
<swiper-container class="mySwiper" navigation="true" pagination="true">
<swiper-slide><img src="https://picsum.photos/3000/1000?random=1" /></swiper-slide>
<swiper-slide><img src="https://picsum.photos/3000/1000?random=2" /></swiper-slide>
<swiper-slide><img src="https://picsum.photos/3000/1000?random=3" /></swiper-slide>
<swiper-slide><img src="https://picsum.photos/3000/1000?random=4" /></swiper-slide>
<swiper-slide><img src="https://picsum.photos/3000/1000?random=5" /></swiper-slide>
<swiper-slide><img src="https://picsum.photos/3000/1000?random=6" /></swiper-slide>
</swiper-container>
</template>

Added the below CSS in main.css:

swiper-container {
    width: 80%;
    height: 100%;
    --swiper-navigation-size: 44px;
    --swiper-navigation-color: #fff;}

 .my-next-button,
  .my-prev-button {
    background: #000;
    color: #fff;
    padding: 10px 40px;
}

.my-next-button and .my-prev-button class css properties are not working in this way.

Another way, I tried the below code, slides are not loading and showing error in console that “Uncaught TypeError: Cannot convert undefined or null to object“

Added in App.vue

<template>
<swiper-container class="mySwiper" init="false">
<swiper-slide><img src="https://picsum.photos/3000/1000?random=1" /></swiper-slide>
<swiper-slide><img src="https://picsum.photos/3000/1000?random=2" /></swiper-slide>
<swiper-slide><img src="https://picsum.photos/3000/1000?random=3" /></swiper-slide>
<swiper-slide><img src="https://picsum.photos/3000/1000?random=4" /></swiper-slide>
<swiper-slide><img src="https://picsum.photos/3000/1000?random=5" /></swiper-slide>
<swiper-slide><img src="https://picsum.photos/3000/1000?random=6" /></swiper-slide>
</swiper-container>
</template>

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

  const swiperParams = {
    injectStyles: [`
      .swiper-button-next,
      .swiper-button-prev
       {
        color: #fff;
        background: #000;
      } `],
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
};
Object.assign(swiperEl, swiperParams);
swiperEl.initialize();
</script>

Additional info:

1. Swiper version : 11.1.1
2. Vue js version : 3.4.21
3. For custom element, I registered it in main.js as below

import { register } from 'swiper/element/bundle';

register();