While working with Ruby on Rails 6 and webpacker, I attempted to incorporate a carousel slide similar to this example (Bootstrap 4 Card Slider). However, upon clicking the button to show the next (or previous) slide, an error message "Uncaught TypeError: $(...).carousel is not a function" appeared in the console. Even when I directly entered the script '$('.carousel').carousel' in the console, the same error persisted. I came across information suggesting that loading JQuery multiple times can lead to such errors, but I'm unsure if I've made that mistake. Any suggestions or advice on my codes below would be greatly appreciated.
app/views/home_page/test.html.erb
<%= javascript_pack_tag "carousel" %>
<section class="container p-t-3">
<div class="row">
<div class="col-lg-12">
<h1>Bootstrap 4 Card Slider</h1>
</div>
</div>
</section>
<insert your modified code here>
app/javascript/packs/carousel.js
(function($) {
"use strict";
// manual carousel controls
$('.next').click(function(){ $('.carousel').carousel('next');return false; });
$('.prev').click(function(){ $('.carousel').carousel('prev');return false; });
})(jQuery);
config/webpack/environment.js
app/javascript/packs/application.js
app/javascript/src/application.scss
package.json