0
我想为我的rails站点制作幻灯片。为此，我按照bxSlider网站上的说明进行操作。bxslider website link我在哪里设置bxSlider幻灯片？
以下是我在网站上指出的步骤。
如何安装
第1步：连接所需的文件
首先，也是最重要的，jQuery库需要包括（无需下载 - 直接从谷歌的链接）。接下来，从该站点下载软件包并链接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>
第3步：调用bxSlider
上<ul class="bxslider">呼叫.bxslider()。请注意，该呼叫必须在$(document).ready()呼叫中完成，否则该插件将无法使用！
$(document).ready(function(){
$('.bxslider').bxSlider();
});
这里是我添加这些文件的地方。因为它没有说明在哪里添加它们，我复制了一些YouTube视频，但它们似乎并不完全遵循这三个步骤，并且每个步骤都略有不同。
下面是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]
您是否收到任何错误？检查服务器和客户端（即javascript）。 – Gerry
另外，请检查您是否在公用目录（或资产管道）中有下载的文件。 – Gerry
@Gerry。没有任何错误显示与滑块相关的任何内容。页面的其余部分正确加载。我相信这些文件都在资产管道中，如果这是你的意思是在app/assets文件夹中。 – Owen