add circular border over forward and backward slider about react-image-gallery HOT 3 OPEN

and make it smaller

from react-image-gallery.

you can render a custom nav using renderRightNav and renderLeftNav.

from react-image-gallery.

Or you can also use additionalClass property to design your nav. For instance:

in the App.jsx:
<ImageGallery ... additionalClass={"extra-class"} />

in your css file:

.extra-class .image-gallery-left-nav {
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #fff;
}

.extra-class .image-gallery-left-nav .image-gallery-svg {
  stroke-width: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  width: 14px;
  color: #000;
}

The disadvantage of this approach is you can't change the icon svg itself, but it's doable.

from react-image-gallery.