How can I style the "/" between the pagination fractions?

[henrybabbage]

Hello,

I need to be able to change the "/" between the pagination fractions to a "|" to follow our company designs.

I inspected the element but it appears the "/" is between .swiper-pagination-current and .swiper-pagination-total.

Is there any way at all I can target that slash so that I can change it?

Or can I insert a custom pagination component somehow?

I am working with React / NextJS. Thanks so much for any suggestions.

[henrybabbage]

I found a solution at this link https://github.com/nolimits4web/swiper/issues/3855#issuecomment-827943545

useSwiperRef.js

const useSwiperRef = () => {
	const [wrapper, setWrapper] = useState(null)
	const ref = useRef(null)

	useEffect(() => {
		setWrapper(ref.current)
	}, [])

	return [
		wrapper,
		ref
	]
}

export default useSwiperRef

const [paginationEl, paginationRef] = useSwiperRef()

And credit to @Banjer71 for their solution which I adapted too:

pagination={{
			type: 'fraction',
			el: paginationEl,
			renderFraction: (currentClass, totalClass) => {
			return '<span class="' + currentClass + '"></span>' +
							 '<span>&emsp;</span>' +
							 ' | ' +
							 '<span>&emsp;</span>' +
							 '<span class="' + totalClass + '"></span>'
			}
}}

<div className='body' ref={paginationRef}></div>