我正在尝试为我的 Rails 站点制作幻灯片。为此，我按照 bxSlider 网站上的说明进行操作 bxslider website link
以下是我按照网站上的指示执行的步骤。
如何安装
第 1 步:链接所需文件
首先也是最重要的是，需要包含 jQuery 库(无需下载 - 直接从 Google 链接)。接下来，从该站点下载包并链接 bxSlider CSS 文件(用于主题)和 bxSlider Javascript 文件。
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
第 2 步:创建 HTML 标记
创建一个 <ul class="bxslider">元素，带有 <li>对于每张幻灯片。幻灯片可以包含图像、视频或任何其他 HTML 内容!
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
第三步:调用bxSlider
调用.bxslider()在 <ul class="bxslider"> .请注意，调用必须在 $(document).ready() 内进行调用，否则插件将无法运行!
$(document).ready(function(){
$('.bxslider').bxSlider();
});
这是我添加这些文件的地方。因为它没有说明添加它们的位置，所以我复制了一些 youtube 视频，但它们似乎都没有完全遵循这 3 个步骤，每个步骤都略有不同。
下面是application.html.erb文件
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Architects Daughter">
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Great Vibes">
<title>Acupuntura Simon Verde</title>
<%= csrf_meta_tags %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<ul class="bxslider">
<li><img src="/images/bamboo.jpg" /></li>
<li><img src="/images/bamboo2.jpg" /></li>
<li><img src="/images/treatment1.jpg" /></li>
<li><img src="/images/treatment2.jpg" /></li>
</ul>
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<!-- <div id="container">
<div id="mainpic">
<h1><span class="off2">Acupuntura Cosmetica</span></h1>
<h2>Simon Verde</h2>
</div> -->
<div id="menu">
<ul>
<li class="menuitem">
<div class="dropdown">
<button class="dropbtn">Inicio</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</li>
<li class="menuitem">
<div class="dropdown">
<button class="dropbtn">La Acupuntura</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</li>
<li class="menuitem">
<div class="dropdown">
<button class="dropbtn">Sobre Nosotros</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</li>
<li class="menuitem">
<div class="dropdown">
<button class="dropbtn">Tratamientos</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</li>
<li class="menuitem">
<div class="dropdown">
<button class="dropbtn">Precios</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</li>
<li class="menuitem">
<div class="dropdown">
<button class="dropbtn">Testimonials</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</li>
<li class="menuitem">
<div class="dropdown">
<button class="dropbtn">Contacto</button>
<div class="dropdown-content">
<a href="new">Formulario de contacato</a>
<!-- <a href="#">Link 2</a>
<a href="#">Link 3</a> -->
</div>
</div>
</li>
<!-- <li class="menuitem"><a href="inicio">Inicio</a></li>
<li class="menuitem"><a href="sobre">La Acupuntura</a>
<ul>
<li><a href=#>Para quien es</a></li>
<li><a href=#>Como funciona</a></li>
<li><a href=#>something else</a></li>
</ul>
</li> -->
<!-- <li class="menuitem"><a href="inicio">Inicio</a></li>
<li class="menuitem"><a href="sobre">Sobre Nosotros</a></li>
<li class="menuitem"><a href="acupuntura">La Acupuntura</a></li>
<li class="menuitem"><a href="tratamientos">Tratamientos</a></li>
<li class="menuitem"><a href="prensa">Prensa</a></li>
<li class="menuitem"><a href="new">Contacto</a></li> -->
</ul>
</div>
<div id="content">
<p>jjj</p>
<p> </p>
<%= yield %>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="footer"><h3><a href="http://www.bryantsmith.com">Acupuntura Simon Verde</a></div>
</div>
</div>
</body>
</html>
我是把东西放在了破旧的地方还是遗漏了什么？谢谢
编辑:添加 css 错误。
Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.self-e8159e2f25b88e4811b048150ba7ed4782f9097a2c773a91921af1976ef07077.css:10:2
Unknown property '-moz-box-shadow'.
Declaration dropped. jquery.bxslider.self-e8159e2f25b88e4811b048150ba7ed4782f9097a2c773a91921af1976ef07077.css:32:17
Unknown property '-moz-border-radius'. Declaration dropped. jquery.bxslider.self-e8159e2f25b88e4811b048150ba7ed4782f9097a2c773a91921af1976ef07077.css:72:20
Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.self-e8159e2f25b88e4811b048150ba7ed4782f9097a2c773a91921af1976ef07077.css:85:2
Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.self-e8159e2f25b88e4811b048150ba7ed4782f9097a2c773a91921af1976ef07077.css:86:2
Unknown property '-moz-box-shadow'. Declaration dropped. jquery.bxslider.min.self-20800de2808abed56c80e727b78530acbb6a5813a63c095606d36c08b557fcc1.css:1:116
Unknown property '-moz-border-radius'. Declaration dropped. jquery.bxslider.min.self-20800de2808abed56c80e727b78530acbb6a5813a63c095606d36c08b557fcc1.css:1:911
Error in parsing value for 'width'. Declaration dropped. style.self-49aba9bf3c33acfe5778acd4415ffe78d6e2f9c3473fb11430b014a18ad22038.css:87:9
Expected colour but found '#black'. Error in parsing value for 'color'. Declaration dropped. style.self-
49aba9bf3c33acfe5778acd4415ffe78d6e2f9c3473fb11430b014a18ad22038.css:123:9
Error in parsing value for 'margin-bottom'. Declaration dropped. jquery.bxslider.css:7:17
Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.css:9:2
Unknown property '-moz-box-shadow'. Declaration dropped. jquery.bxslider.css:31:17
Unknown property '-moz-border-radius'. Declaration dropped. jquery.bxslider.css:71:20
Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.css:84:2
Expected declaration but found '*'. Skipped to next declaration. jquery.bxslider.css:85:2
Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery.min.js:2:40278
GET
http://localhost:3000/assets/style.self-49aba9bf3c33acfe5778acd4415ffe78d6e2f9c3473fb11430b014a18ad22038.css [HTTP/1.1 200 OK 0ms]
GET
http://localhost:3000/assets/style.self-49aba9bf3c33acfe5778acd4415ffe78d6e2f9c3473fb11430b014a18ad22038.css [HTTP/1.1 200 OK 0ms]
最佳答案
问题是所需的资源不存在，因此您需要从bxslider.com 下载.js 和.css 文件。并将它们添加到您的元素中。
下载 .zip 文件，并将所需文件添加到公用文件夹中:
css/jquery.bxslider.cssjs/jquery.bxslider.min.js
css 和 js 是您必须创建并将文件放入其中的文件夹。
然后，在 application.html.erb 中更新您调用这些 Assets 的行:
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/css/jquery.bxslider.css" rel="stylesheet" />
最后，将与您下载的相同 .zip 中的图像添加到“图像”文件夹内的公共(public)文件夹中。
更新
要使用 Assets 管道，您应该更改在 application.html.erb 中加载 Assets (即图像、javascript 和样式表)的方式；与其从 /lib/、js、images 中引用它们，不如从 assets 中引用它们，例如这个:
application.html.erb(仅显示相关代码):
<!-- bxSlider CSS file -->
<link href="/assets/jquery.bxslider.css" rel="stylesheet" />
...
<ul class="bxslider">
<li><img src="/assets/bamboo.jpg" /></li>
<li><img src="/assets/bamboo2.jpg" /></li>
<li><img src="/assets/treatment1.jpg" /></li>
<li><img src="/assets/treatment2.jpg" /></li>
</ul>
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/assets/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
接下来，您还必须更新 jquery.bxslider.css 文件，以引用来自 /assets/ 而不是 images/ 的所有图像，所以改变:
url('images/bx_loader.gif')到url('/assets/bx_loader.gif')和url('images/controls.png')到url('/assets/controls.png')(出现 4 次)
现在您可以将 .js 添加到 app/assets/javascripts，将 .css 添加到 app/assets/stylesheets 和图像到 app/assets/images。
有关 Assets 管道的更多信息，请查看 rails guides .
关于html - 设置 bxSlider 幻灯片放映哪里出错了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43428358/