arrows not disappearing

[rayhAE]

I am trying to implement A11y into a project and I want the arrows to disappear once the viewport get to a certain width. I was looking over the docs and used the same code as shown in the docs but nothing seems to work. If there are any ideas/advice I would greatly appreciate some feed back.

[mmdevcodes]

If you want to hide the arrows at a certain width use the responsive option. An example to hide the arrows once the viewport is at 768px:

const slider = new A11YSlider(document.querySelector(".slider"), {
  arrows: true, // arrows enabled 767px and down
  responsive: {
    768: {
      arrows: false // arrows disabled 768px and up
    }
  }
});

[rayhAE]

I have seen that syntax in the docs and I have tried it a couple of times and it still isn't working for me. Here is the code I am using:

const slider2 = new A11YSlider(
  document.querySelector(".hero__sub-carousel"),
  {
    // slidesToShow: 5,
    arrows: false,
    // dots: true,
    // adaptiveHeight: true,
    // centerMode: false,
    slidesToShow: 1,
    prevArrow: document.querySelector(".hero__sub-prev-arrow"),
    nextArrow: document.querySelector(".hero__sub-next-arrow"),
    responsive: {
      769: {
        arrows: false,
      },
      1024: {
        arrows: false,
      },
      1440: {
        slidesToShow: 5
      }
    }
  }
);
});

[mmdevcodes]

Your arrows is set to false for all breakpoints. It's never enabled at any breakpoint.

[rayhAE]

I understand that but if they are not enabled at any break point how come they are still visible and also functional to move to the previous or next slide?

[mmdevcodes]

Oh I see. Since you have your own custom arrows a11y-slider does not apply show/hide classes. You'll need to add your own CSS media queries to hide the arrows. Set them to display: none.

[rayhAE]

I figured that would be the case. I am also having another problem as well. Once the viewport gets to 1024px, the slider goes into centerMode, even with centerMode disabled. On top of that the slide won't allow me to go to the previous (left) slide. I am only able to move to the next slide. Any ideas/suggestions?

[rayhAE]

It's worth mentioning that when in mobile mode the slider works just fine, moving to the previous or next slides. However, as I mentioned above when not in mobile mode the slider starts acting a bit weird

[mmdevcodes]

Unfortunately centerMode is an experimental/deprecated option and will be removed in the next release. It doesn't work well with overflowed containers.