Search code examples
splidejs

Splide slider: i am passing custom classes through options but it is removing default functionally of arrow


This are the options i passed, i added slider-prev for previous same slider-next for next but not working

options={{ type: 'slide', arrows: false, pagination: false, classes: { prev: 'slider-prev', next: 'slider-next', }, }}

I tried this as well add slider-arrow common class here as well options={{ type: 'slide', arrows: false, pagination: false, classes: { prev: 'slider-arrow slider-prev', next: 'slider-arrow slider-next', }, }}


Solution

  • Here, what you did it completely added custom classes for arrow and how this will work is, these classwa will totally replace with default splide slider classes. and to solve this or to add default css, you also need to pass that default class with your custom class.

    classes: {
       arrows: 'splide__arrows your-class-arrows',
       arrow : 'splide__arrow your-class-arrow',
       prev  : 'splide__arrow--prev your-class-prev',
       next  : 'splide__arrow--next your-class-next',
     }
    

    and For your case it will be like

    classes: {
       prev: 'splide__arrow--prev slider-arrow slider-prev',
       next: 'splide__arrow--next slider-arrow slider-next',
    }