I am working on a booking website with webpack. I needed a slider and decided to use flickity. There are only two js code in my project. One of them is for menubar (onclick function). The second one is flickity code. Both of them are in HTML, between script tags. Onclick function run perfectly but flickity doesn't.

Here are my script codes:

 function myFunction() {
document.getElementById("akmenu").classList.toggle("show");}

$('.Highlights-slider').flickity({
cellAlign: 'left',
contain: true
});

Webpack.config file:

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const loader = require('sass-loader');

 module.exports = {
  entry: './src/index.js',
   output: {
 path: path.resolve(__dirname, 'dist'),
 filename: 'bundle.js',
 },

 module: {
  rules: [
  {
    test: /\.html$/i,
    loader: "html-loader",
    options: {
        sources: {
            list: [
                {
                    tag: "img",
                    attribute: "data-src",
                    type: "src",
                  },
            ]
        }
    }
  },

  
  {
    test: /\.s[ac]ss$/i,
    use: [
        MiniCssExtractPlugin.loader,
      // Translates CSS into CommonJS
      "css-loader",
      // Compiles Sass to CSS
      "sass-loader",
    ],
  },
  {
    test: /\.(png|jpe?g|gif)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
            name: '/asset/img/[name].[ext]',
        }
      },
    ],
  },
  ],
  },
   plugins: [
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: '/src/index.html'
   }),
        new MiniCssExtractPlugin(),
        ],

   };

Here are my slider's code:

 <section class="Highlights">
        <div class="container">
            <div class="Highlights-slider">
                <div class="Highlights-item">1</div>
                <div class="Highlights-item">2</div>
                <div class="Highlights-item">3</div>
                <div class="Highlights-item">4</div>
                <div class="Highlights-item">5</div>
                <div class="Highlights-item">6</div>
                <div class="Highlights-item">7</div>
            </div>
        </div>
    </section>