Hide next/prev button on first/last slide respectively

[BenHappyPlates]

Good Day Ladies and Gentleman,

i'm using NextJS und Hooks and I'm trying to hide the navigation arrows if the active slide is the first or the last item in the array.

i read that there is a disabledClass and a hiddenClass but i'm not sure how to use them correctly

i'd really appreciate any advice

regards Ben

[jpierson-at-riis]

I'm trying to do this with the following style rule but it doesn't seem to be working for me at the moment.

swiper-container::part(button-prev)[aria-disabled=true],
swiper-container::part(button-next)[aria-disabled=true] {
  display: none;
}

See my code sandbox example.

[jpierson-at-riis]

It seems that psudoselectors should be usable on ::part pseudo-element so I'm not sure why this is not working.

https://developer.mozilla.org/en-US/docs/Web/CSS/::part

I've also tried the following class selector looking for .swiper-button-disabled but to no avail.

swiper-container::part(button-prev).swiper-button-disabled,
swiper-container::part(button-next).swiper-button-disabled {
  display: none;
}

[jpierson-at-riis]

I'm reading up on this now. This SO answer seems to be speaking directly to the concepts here.

StackOverflow - Can the CSS :part pseudo-selector be used to style nested web components?

Explainer: CSS Shadow ::part and ::theme

[jpierson-at-riis]

Currently, the most straight forward approach that I can think of with what I know would be to inject styles to override the internal styles of this part but it's possible that new features could be added to make this easier to achieve.

[Baribj]

Since there is still no clean global solution for this, and for folks using the web components, you can do:

<swiper-container
        navigation="true"
        direction="horizontal"
        threshold="10"
        slides-per-view="auto"
        space-between="15"
        slides-per-group-auto="true"
        inject-styles='[".swiper-button-disabled{ display:none !important; }"]'
      >
        .
        .
        .
</swiper-container>