Estoy trabajando en un sitio web de reservas con webpack. Necesitaba un control deslizante y decidí usar flickity. Solo hay dos códigos js en mi proyecto. Uno de ellos es para la barra de menú (función onclick). El segundo es el código flickity. Ambos están en HTML, entre etiquetas de script. La función Onclick funciona perfectamente pero flickity no.

Aquí están mis códigos de script:

 function myFunction() { document.getElementById("akmenu").classList.toggle("show");} $('.Highlights-slider').flickity({ cellAlign: 'left', contain: true });

Archivo webpack.config:

 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(), ], };

Aquí está el código de mi control deslizante:

 <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>