Dirty way to move pagination in React Id Swiper package

not-proud-of-this.js

import {PureComponent} from "react";
import PropTypes from "prop-types";
import styled from "@emotion/styled";
import LazyLoad from "react-lazyload";
import Swiper from "react-id-swiper";

import autoBind from "../../../utils/autoBind";
import b64DecodeUnicode from "../../../utils/b64DecodeUnicode";
import {BREAKPOINTS, COLORS, DEPTH, FONTS, GUTTER_VERTICAL} from "../../../utils/styling";

import BrandSliderSlide from "./BrandSliderSlide";

const BrandSliderContainer = styled.div(({overlayTopElement}) => ({
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    transition: '.25s ease-in-out opacity',
    transform: overlayTopElement ? 'translateY(-150px)' : 'none',
    marginBottom: overlayTopElement ? '-150px' : '0',
    zIndex: DEPTH[5],

    [`@media screen and (max-width: ${BREAKPOINTS.lg}px)`]: {
        transform: overlayTopElement ? 'translateY(-100px)' : 'none',
        marginBottom: overlayTopElement ? '-100px' : '0',
    },

    [`@media screen and (max-width: ${BREAKPOINTS.sm}px)`]: {
        transform: overlayTopElement ? 'translateY(-75px)' : 'none',
        marginBottom: overlayTopElement ? '-75px' : '0',
    }
}))

const BrandSliderSlider = styled.div({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    position: 'relative',
    width: '100%',
    height: '120px',
    borderRight: `1px solid ${COLORS.lightGrayPartnerBlock}`,
    borderLeft: `1px solid ${COLORS.lightGrayPartnerBlock}`,
    borderTop: `1px solid ${COLORS.lightGrayPartnerBlock}`,
    borderBottom: `1px solid ${COLORS.lightGrayPartnerBlock}`,
    backgroundColor: COLORS.lightGrayPartnerBackground,

    [`@media screen and (max-width: ${BREAKPOINTS.lg}px)`]: {
        height: '90px',
    },

    [`@media screen and (max-width: ${BREAKPOINTS.sm}px)`]: {
        height: '60px',
    }
})

const BrandSliderText = styled.div({
    display: 'flex',
    width: 'calc((100% / 6) * 1)',
    position: 'relative',
    boxSizing: 'content-box',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    zIndex: DEPTH[2],
    borderRight: `1px solid ${COLORS.lightGrayPartnerBlock}`,

    [`@media screen and (max-width: ${BREAKPOINTS.lg}px)`]: {
        width: 'calc((100% / 4) * 1)',
    },

    [`@media screen and (max-width: ${BREAKPOINTS.md}px)`]: {
        width: 'calc((100% / 3) * 1)',
    },

    [`@media screen and (max-width: ${BREAKPOINTS.sm}px)`]: {
        display: 'none'
    }
})

const BrandSliderTextText = styled.span({
    fontFamily: FONTS.book,
    color: COLORS.grayPartnerText,
    fontSize: '20px',
    fontWeight: '300',
    lineHeight: '28px',
    maxWidth: '65%',

    [`@media screen and (max-width: ${BREAKPOINTS.xl}px)`]: {
        fontSize: '16px',
        lineHeight: '20px',
        maxWidth: '80%'
    }
})

const BrandSliderSwiperContainer = styled.div({
    display: 'flex',
    width: 'calc((100% / 6) * 5)',
    height: '100%',
    position: 'relative',
    boxSizing: 'content-box',
    zIndex: DEPTH[1],

    [`@media screen and (max-width: ${BREAKPOINTS.lg}px)`]: {
        width: 'calc((100% / 4) * 3)',
    },

    [`@media screen and (max-width: ${BREAKPOINTS.md}px)`]: {
        width: 'calc((100% / 3) * 2)',
    },

    [`@media screen and (max-width: ${BREAKPOINTS.sm}px)`]: {
        width: '100%'
    }
})

const PaginationContainer = styled.div(({paginationLoading}) => ({
    display: 'block',
    margin: '0 auto',
    opacity: paginationLoading ? '0' : '1',
    position: 'relative',
    transition: '.25s ease-in-out opacity .25s',
    overflow: 'hidden',
    listStyle: 'none',
    width: '100%',
    maxWidth: '100%',
    padding: '0',
    zIndex: '1',
    marginTop: GUTTER_VERTICAL,

    [`@media screen and (max-width: ${BREAKPOINTS.md}px)`]: {
        marginTop: `${GUTTER_VERTICAL / 2}px`,
        marginBottom: `${GUTTER_VERTICAL / 2}px`
    },

    '.swiper-pagination': {
        position: 'relative',
        transform: 'none',
        bottom: '0',
        padding: '5px 0'
    },

    '.swiper-pagination-bullet': {
        height: '12px',
        width: '12px',
        margin: '0 9px !important',
        outline: 'none',
        boxShadow: 'none',
        border: 'none'
    },

    '.swiper-pagination-bullet-active': {
        backgroundColor: COLORS.bluePrimary,
    }
}))

@autoBind
class BrandSlider extends PureComponent {

    /**
     * Create default swiperInstance
     * @type {null}
     */
    swiperInstance = null

    /**
     * Set default $paginationEl to null
     * @type {null}
     */
    $paginationEl = null

    /**
     * BrandSlider constructor
     * @param props
     */
    constructor(props) {
        super(props)
        const {slides} = this.props
        let parsedSlides = ''

        if (slides !== '') {
            try {
                parsedSlides = JSON.parse(b64DecodeUnicode(slides))
            } catch (error) {
                console.log('error while parsing BrandSlider data in BrandSlider constructor..', error)
            }
        }

        this.state = {
            loading: true,
            slides: parsedSlides
        }
    }

    /**
     * Set swiper ref
     * @param swiper
     */
    setSwiperRef(swiper) {
        this.swiperInstance = swiper

        //move pagination to the place it belongs
        this.$paginationEl.insertAdjacentElement('beforeend', this.swiperInstance.pagination.el)
        this.swiperInstance.pagination.update()
        this.setState({loading: false})
    }

    /**
     * render lifecycle
     * @returns {*}
     */
    render() {
        const {slides, loading} = this.state
        if (slides === '' || slides.length === 0) return null
        const {text, overlayTopElement} = this.props

        return (
            <>

                <BrandSliderContainer overlayTopElement={overlayTopElement}>

                    <BrandSliderSlider>

                        {text !== '' ? (
                            <BrandSliderText>
                                <BrandSliderTextText>
                                    {text}
                                </BrandSliderTextText>
                            </BrandSliderText>
                        ) : null}

                        <BrandSliderSwiperContainer>

                            <LazyLoad offset={0}>

                                <Swiper direction="horizontal"
                                        loop={false}
                                        centeredSlides={false}
                                        roundLengths={false}
                                        slidesPerView={5}
                                        slidesPerGroup={5}
                                        spaceBetween={0}
                                        speed={250}
                                        getSwiper={this.setSwiperRef}
                                        pagination={{
                                            el: '.swiper-pagination',
                                            dynamicBullets: true,
                                            type: 'bullets',
                                            clickable: true
                                        }}
                                        autoplay={false}
                                        watchSlidesVisibility={true}
                                        preloadImages={false}
                                        lazy={true}
                                        breakpoints={{
                                            1024: {
                                                slidesPerView: 4,
                                                slidesPerGroup: 4,
                                            },
                                            768: {
                                                slidesPerView: 3,
                                                slidesPerGroup: 3,
                                            },
                                            0: {
                                                slidesPerView: 2,
                                                slidesPerGroup: 2,
                                            }
                                        }}>
                                    {slides.map((slide, index) => {
                                        return (
                                            <div className="swiper-slide" key={`brand_slider_slide_${index}`}>
                                                <BrandSliderSlide {...slide}/>
                                            </div>
                                        )
                                    })}
                                </Swiper>

                            </LazyLoad>

                        </BrandSliderSwiperContainer>

                    </BrandSliderSlider>

                    <PaginationContainer
                        ref={($paginationEl) => this.$paginationEl = $paginationEl}
                        paginationLoading={loading}
                        className="swiper-container swiper-container-initialized swiper-container-horizontal">

                    </PaginationContainer>

                </BrandSliderContainer>

            </>
        )
    }
}

BrandSlider.defaultProps = {
    slides: '',
    text: '',
    overlayTopElement: false
}

BrandSlider.propTypes = {
    slides: PropTypes.string, //b64 encoded string
    text: PropTypes.string,
    overlayTopElement: PropTypes.bool
}

export default BrandSlider;