我在设置 bxSlider 幻灯片时哪里出错了？

debugcn 发表于 Dev

欧文

我正在尝试为我的 rails 站点制作幻灯片。为此，我遵循 bxSlider 网站bxslider 网站链接上的说明

这是我按照网站上指示的步骤。

如何安装

第 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>

第 3 步：调用 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>&nbsp;</p>

                <%= yield %>

                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
    <p>&nbsp;</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.css
js/jquery.bxslider.min.js

css和js是您必须创建并将文件放入其中的文件夹。

然后，application.html.erb更新您调用这些资产的行：

<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/css/jquery.bxslider.css" rel="stylesheet" />

最后，将您下载的同一个 .zip 中的图像也添加到“图像”文件夹内的公共文件夹中。

更新

要使用资产管道，您应该更改加载资产（即图像、javascript 和样式表）的方式application.html.erb；而不是从/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/，因此更改：