gpt4 book ai didi

javascript - Owl Carousel 不适用于 Rails

转载 作者:搜寻专家 更新时间:2023-11-01 05:00:30 25 4
gpt4 key购买 nike

Owl Carousel 不适用于我的 rails 安装。它没有出现在我的测试页面上,这个错误出现在 Chrome 开发者控制台中:

Chrome console error highlighting call to .owlCarousel()

Uncaught TypeError: undefined is not a function

我已按照 https://github.com/acrogenesis/owlcarousel-rails 上的说明进行操作

even installed this fix since Rails turbolinks apparently messes with DOM triggers .

下面是rails中的相关代码:

**GemFile**
gem 'owlcarousel-rails'

**app/assets/application.js**
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require owl.carousel
//= require_tree .

**app/assets/stylesheets/application.css**
*= require_tree .
*= require_self
*= require owl.carousel
*= require owl.theme

**home.html.erb**
<body>
...
<div class="owl-carousel" col-lg-12">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
...
</body>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
autoPlay: 3000,
item: 3
});
});
</script>

目前,这就是该区域的样子(白色区域应该有内容): Screenshot of page showing only page title

最佳答案

为了防止其他人遇到此问题,我构建了一个快速存储库,演示了嵌入引导网格的 owlcarousel-rails gem 的工作版本。我还在 README 中解释了我所做的更改。

我知道有时需要同时查看所有工作部分才能准确找出问题所在。

此处 repo :https://github.com/EliCash82/carousel-optimization

查看app/assets/javascriptsapp/assets/stylesheets,最重要的是app/views/static_pages/carousel_in_grid.html.erb

希望这对某人有所帮助:)

关于javascript - Owl Carousel 不适用于 Rails,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28997786/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com