How to customize Swiper React.js Arrow in jsx or Styled.Component

Asked

Viewed 193 times

0

I want to customize the Arrows of Swiper, but I found nothing in the documentation.

This is the code of my navigation:

 const params = {
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    slidesPerView: 7,
    spaceBetween: 5,
    shouldSwiperUpdate: true,
    pagination: {
      clickable: true,
    },
  };

And you’re showing it that way:

inserir a descrição da imagem aqui

I need to change the color of Arrow, and its size. I wanted to use style={{}}, or Styled.Component.

css react front-end styled-components

  • Are you using the https://swiperjs.com/react? library If not, please send the link?

  • Sure, I’m using this one https://swiperjs.com/react/

1 answer

0

Hello,

At its core the React swiperjs has no means of working with styledComponents or style, as per documentation of them, the options available are:

  • manipulate the CSS styles
  • work with LESS
  • work with SCSS

A simple and quick solution would be to add the css snippet below into your HTML:

div.swiper-button-prev,
div.swiper-button-next {
   color: red;
}

See the examples available for more information

Browser other questions tagged css react front-end styled-components

You are not signed in. Login or sign up in order to post.