Estoy trabajando en un proyecto Symfony con Webpack Encore y tengo un problema al cargar Bootstrap y el complemento Carousel.
Podría provenir de la importación de Bootstrap porque parece funcionar (pero no completamente) cuando importo el archivo:
import './styles/bootstrap.min.css';Pero el control deslizante no funciona en absoluto cuando importo correctamente el paquete de 'node_modules':
import 'bootstrap';Y ningún error en la consola. Aquí está mi código:
aplicación.css
@import '~bootstrap'; @import url('https://maps.googleapis.com/maps/api/js?language=en'); @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');aplicación.js
//import './styles/bootstrap.min.css'; import 'bootstrap';deslizador.js
import jQuery from 'jquery'; // make Carousel a jQuery plugin import Carousel from 'bootstrap/js/dist/carousel'; import jQueryBridget from 'jquery-bridget'; jQueryBridget('carousel', Carousel, jQuery); ;(function ($, window, document, undefined) { $(document).ready(function () { $('.carousel').carousel({ interval: 10000 }); }); })(jQuery, window, document);Primero: trata de entender lo que estás haciendo. Si bien Webpack se usa para compilar módulos de JavaScript , jQuery es una biblioteca que se desarrolló cuando JS no era tan moderno. Hoy en día, es posible que ya no necesite jQuery . Entonces estás combinando JS moderno con JS heredado. Si bien puede funcionar, no lo intente si no lo necesita.
Bootstrap 5 no necesita jQuery. Entonces, ¿por qué usarlo? Eche un vistazo al ejemplo de la propia documentación de Bootstrap :
var myCarousel = document.querySelector('#myCarousel') var carousel = new bootstrap.Carousel(myCarousel, { interval: 2000, wrap: false })Así que esto debería ser suficiente:
var myCarousel = document.querySelector('.carousel') var carousel = new bootstrap.Carousel(myCarousel, { interval: 1000 })Ya que ha tenido problemas similares antes , realmente sugiero leer la documentación de las bibliotecas que desea usar. Por lo general, proporcionan buenos ejemplos que puede utilizar.
TL; DR: deje de usar jQuery y comience a leer la documentación.