[英]Cannot call Bootstrap4 $('.carousel').carousel in Ruby on Rails 6 using Webpacker
我正在使用 Ruby on Rails 6 和 webpacker。 嘗試添加輪播幻燈片看起來像這樣(Bootstrap 4 Card Slider)
但是,當我單擊按鈕顯示下一張(或上一張)幻燈片時, Uncaught TypeError: $(...).carousel is not a function
控制台中彈出Uncaught TypeError: $(...).carousel is not a function
。 即使我直接在控制台中編寫腳本$('.carousel').carousel
,也發生了同樣的錯誤。
我看到多次加載 JQuery 會導致類似的錯誤,但我不知道我這樣做了。
下面是我的代碼。 任何建議都是有幫助的。
應用程序/視圖/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>
<section class="carousel slide" data-ride="carousel" id="postsCarousel">
<div class="container">
<div class="row">
<div class="col-xs-12 text-md-right lead">
<a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-md-3">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="http://i.imgur.com/EW5FgJM.png" alt="Carousel 1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="http://i.imgur.com/Hw7sWGU.png" alt="Carousel 2">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="http://i.imgur.com/g27lAMl.png" alt="Carousel 3">
</div>
</div>
</div>
</div>
<div class="row row-equal carousel-item m-t-0">
<div class="col-md-3">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="//visualhunt.com/photos/l/1/office-student-work-study.jpg" alt="Carousel 4">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="//visualhunt.com/photos/l/1/working-woman-technology-computer.jpg" alt="Carousel 5">
</div>
</div>
</div>
<div class="col-md-3 fadeIn wow">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="//visualhunt.com/photos/l/1/people-office-team-collaboration.jpg" alt="Carousel 6">
</div>
</div>
</div>
</div>
</div>
</section>
應用程序/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);
配置/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
jquery: 'jquery/src/jquery',
Popper: 'popper.js'
})
)
module.exports = environment
應用程序/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("trix")
require("@rails/actiontext")
import '../src/application'
import 'bootstrap'
應用程序/javascript/src/application.scss
@import '~bootstrap/scss/bootstrap';
包.json
{
"name": "sample",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/actiontext": "^6.0.2-1",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"bootstrap": "4.3.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.1",
"trix": "^1.0.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.1"
}
}
我的 environment.js 中有以下內容:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
這使得 jquery 與 webpacker 一起工作。
然后在你的 application.scss 中
@import '~bootstrap';
接下來你的 test.html.rb 有點亂。 這是一個精簡版,無需卡片和其他樣式即可使用:
<section class="container">
<h1>Bootstrap 4 Card Slider</h1>
</section>
<section class="container">
<a class="btn btn-lg" href="#carouselExample" role="button" data-slide="prev">
<span> « </span>
</a>
<a class="btn btn-lg" href="#carouselExample" role="button" data-slide="next">
<span> » </span>
</a>
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://i.imgur.com/EW5FgJM.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://i.imgur.com/Hw7sWGU.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://i.imgur.com/g27lAMl.png" alt="Third slide">
</div>
</div>
</div>
</section>
這使用數據屬性,因此您不需要 carousel.js 中的任何 javascript。 讓這樣的東西工作,然后重新添加你的卡片和樣式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.