• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

115
Views
Importar Bootstrap y carrusel de complementos con Webpack Encore

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);
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error