Currently, I am tackling an issue within my Symfony project that involves Webpack Encore and the loading of Bootstrap and the Carousel plugin.
The problem may stem from how I import Bootstrap, as it seems to partially work when I import the file like this:
import './styles/bootstrap.min.css';
However, the slider does not function at all when I properly import the package from 'node_modules' like this:
import 'bootstrap';
Interestingly, no errors appear in the console. Below is a snippet of my code:
app.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');
app.js
//import './styles/bootstrap.min.css';
import 'bootstrap';
slider.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);