Question

我正在尝试为我的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>

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

Answer 1

问题是所需资产不存在，因此您需要从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中的图像也添加到“images”文件夹中的公共文件夹中。

更新

要使用资产管道，您应该在application.html.erb中更改加载资产的方式（即图片，javascripts和样式表）;而不是从/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。

有关资产管道的更多信息，请查看rails guides。

我在哪里设置bxSlider幻灯片？

1 个答案: