Почему не работает navigation в swiper?

Question

[Дмитрий Путилов]

Имеется развернутый проект на webpack, вот ее конфиг
webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main: './js/index.ts'
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        port: 3000,
        watchFiles: path.resolve(__dirname, 'src')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src', 'index.html'),
            filename: 'index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            JQuery: 'jquery'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(svg|png|jpg|jpeg)$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                },
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    }
}

Вот кон в HTML, за стилистику я использую tailwind

<section class="mt-12 ">
    <div class="container mx-auto">

        <div class="relative">
            <!--Кнопка Prev-->
            <div id="banner_swiper_prev" class="w-9 h-16 absolute top-1/2 -translate-y-1/2 rounded-r-full z-10 bg-[white] cursor-pointer">
                <img
                        src="/images/global/arrow.svg"
                        alt=""
                        class="rotate-180 w-1/3 absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2"
                >
            </div>

            <div id="swiper_banner" class="overflow-hidden relative select-none">

                <div class="wrapper flex flex-nowrap">

                    <div class="slide shrink-0 relative">
                        <img class="w-full" src="images/banner.jpeg" alt="">
                        <div class="absolute top-2/3 left-12 text-[white] text-6xl max-w-md font-bold">Карнавальные костюмы</div>
                    </div>

                    <div class="slide shrink-0 relative">
                        <img class="w-full" src="images/banner.jpeg" alt="">
                        <div class="absolute top-2/3 left-12 text-[white] text-6xl max-w-md font-bold">Одежда для школы</div>
                    </div>

                    <div class="slide shrink-0 relative">
                        <img class="w-full" src="images/banner.jpeg" alt="">
                        <div class="absolute top-2/3 left-12 text-[white] text-6xl max-w-md font-bold">text</div>
                    </div>

                </div>

            </div>

            <!--Кнопка Next-->
            <div id="banner_swiper_next" class="w-9 h-16 absolute top-1/2 right-0 rotate-180 -translate-y-1/2 rounded-r-full z-10 bg-[white] cursor-pointer">
                <img
                        src="/images/global/arrow.svg"
                        alt=""
                        class="rotate-180 w-1/3 absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2"
                >
            </div>
            <div class="banner_pagination">test</div>
        </div>
    </div>
</section>

Вот SwiperClass.ts

import SwiperLib from 'swiper'
import 'swiper/swiper.min.css'
import {ICreateSwiper} from "../../types/ICreateSwiper";

class SwiperClass {
    createSwiper({swiperElement, wrapper, countSlides, slide, prev, next}: ICreateSwiper) {
        const swiper = new SwiperLib(swiperElement, {
            slideClass: slide,
            wrapperClass: wrapper,
            slidesPerView: countSlides,
            loop: true,
            spaceBetween: 40,
            navigation: {
                prevEl: prev.get(0),
                nextEl: next.get(0)
            },
            pagination: {
                el: $('.banner_pagination').get(0),
                type: "bullets"
            }
        })

        /*prev.click(() => {
            swiper.slidePrev()
        })

        next.click(() => {
            swiper.slideNext()
        })*/

        return swiper
    }
}

export default new SwiperClass

Вот SwiperFunction.ts

import SwiperClass from "./SwiperClass"
import {ICreateSwiper} from "../../types/ICreateSwiper";

//Функциональность Swiper банера на главной странице
const banner_swiper_options: ICreateSwiper = {
    slide: 'slide',
    swiperElement: '#swiper_banner',
    countSlides: 1,
    wrapper: 'wrapper',
    prev: $('#banner_swiper_prev'),
    next: $('#banner_swiper_next')
}

const swiper = SwiperClass.createSwiper(banner_swiper_options)

Вот как сейчас выглядит итог


Swiper полностью работает, но проблема в том что кнопки при клике не рабботают, Swiper не листается, но если сделать через функцию, которую я за комментировал, то в этом случае работает

prev.click(() => {
            swiper.slidePrev()
        })

        next.click(() => {
            swiper.slideNext()
        })