Home > Software design >  Override navigation icons in bulma carousel
Override navigation icons in bulma carousel

Time:07-09

I am looking at the following example for bulma carousel: https://codesandbox.io/s/bold-tree-p3dyf4?file=/index.html and I am looking for a way to override the icons for the navigation buttons.

Docs https://bulma-carousel.onrender.com/customization do not give an advice on how to do it.

Thank you.

CodePudding user response:

Sure, you can use the icon parameter to adjust the text/images of the buttons

bulmaCarousel.attach("#slider", {
  slidesToScroll: 1,
  slidesToShow: 3,
  infinite: true,
  icons: { previous: "L", next: "<span style='color:green;font-weight:800'>R</span>"}
});

Also, you can adjust the background white circle by updating these classes:

.slider-navigation-next, .slider-navigation-previous
  • Related