Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(navigation): Disable navigation elements when instances of HTMLButtonElement #4312

ettoredn opened this issue Mar 9, 2021 · 0 comments


Copy link

ettoredn commented Mar 9, 2021

Is your feature request related to a problem? Please describe.
I'd like to have navigation buttons disabled instead of only getting a class applied to them. Adding point-events: none to said class does cause the click/taps to "pass-through" to the element below. For instance, think a nav button over a thumbnails slider that when disabled would trigger a slide change on the main slider because the click passes through to the slide below it which, in turn, triggers the slide change on the main slider.

Describe the solution you'd like
Add an option to add disabled attribute to navigation elements when they are instances of HTMLButtonElement.

Describe alternatives you've considered
Adding point-events: none to the class results in the issues discussed above.

I've implemented the following custom module to obtain the desired effect.

import {Swiper} from "swiper";
import {SwiperComponent} from "swiper/types/shared";
import {NavigationOptions} from "swiper/types";

function updateButtons(swiper: Swiper) {
  if (!swiper.navigation)

  const params = swiper.params.navigation as NavigationOptions;

  if (swiper.navigation.prevEl instanceof HTMLButtonElement) {
    swiper.navigation.prevEl.disabled = swiper.navigation.prevEl.classList.contains(params.disabledClass as string);
  if (swiper.navigation.nextEl instanceof HTMLButtonElement) {
    swiper.navigation.nextEl.disabled = swiper.navigation.nextEl.classList.contains(params.disabledClass as string);

export default {
  name: 'navigation-disable-button',
  on: {
    init: updateButtons,
    toEdge: updateButtons,
    fromEdge: updateButtons,
} as SwiperComponent;


@ettoredn ettoredn changed the title feat(navigation): Disable navigation elements when their are HTMLButtonElement feat(navigation): Disable navigation elements when instances of HTMLButtonElement Mar 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

1 participant