Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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', }, }}

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>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',
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading