html - 设置 bxSlider 幻灯片放映哪里出错了？-6ren

html - 设置 bxSlider 幻灯片放映哪里出错了？

转载作者：行者123 更新时间：2023-11-28 03:56:27

我正在尝试为我的 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>&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 中更新您调用这些 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/

文章推荐： css - 无法让我的元素符号列表正确显示

文章推荐： javascript - 如何在 ion-slide-box 上隐藏点

bxslider - 使用箭头键控制 BXSLIDER
你能帮我解决这个问题吗？当我按下下一个键(右箭头)时，我试图将箭头控件(左和右)集成到 BxSlider 显示最后一个 slider 图像，它不应该显示，而是显示下一个 slider 图像，然后与前一
bxslider - 在 bxslider 中添加图像链接
我使用以下代码创建 bxslider 我无法将图像超链接到特定链接，即我想将每张幻灯片链接到网址这可能吗？该项目已经达到了我无法将其更改为另一个 jquery 插件的地步
jquery - bxslider 内的 bxslider - jquery
我有一个使用 bxslider 的非常基本的 slider 。我想在 bxslider 本身内运行另一个画廊。请看这个 fiddle :http://jsfiddle.net/CHeLE/6/ 当
php - WordPress 中的 Lumia-bxslider(lumia-bxslider WordPress 插件)
我正在使用“D5 Socialia”主题版本 1.2.8、WordPress 3.7 并在我的网站上安装了 lumia-bxslider slider 插件。我遇到了这些问题: - Height w
bxslider 对于动态加载的内容无法正常工作
其中一个应用程序必须使用 bxslider。我在尝试通过 ajax 实现带有动态加载内容的 bxslider 时遇到了一些问题。它突然起作用了。有趣的是，当通过打开开发工具或更改窗口大小对视口(vi
jquery - bxSlider - 高度和宽度设置
我刚刚开始使用 bxSlider，但遇到了问题。我想要一个具有固定宽度(所有图像具有相同值)和自适应高度的 slider 。这是一项非常标准的任务，但我被困住了，我不知道该怎么办。现在 bxSlide
javascript - bxslider 在页面加载之前堆叠
我正在使用 bx-slider 并面临一个问题，即 slider 的页面加载图像无法完美加载。我希望图像应该在页面加载时完全加载或在完成页面加载后加载，否则图像将隐藏直到页面未完全加载。这是java脚
javascript - BxSlider 禁用特定宽度的自动播放
不确定是我瞎了还是根本就没有。我想在特定宽度上停止 bxSlider 自动播放？就这么简单最佳答案通常，您会像这样启动 bxSlider... $(document).ready(function
javascript - bxslider 移动第一张幻灯片
如何使第一个bxslider幻灯片向左移动-26px？我在 slider 中找到了这一行: propValue = slider.settings.mode === 'vertical' ? 'tra
javascript - bxslider 在鼠标悬停时停止自定义分页
我的网页上有一个 bxSlider。当鼠标悬停在自定义分页器上时，我试图停止 slider 。这是我的 html:
javascript - 在窗口大小调整时重新加载 bxSlider
我在我的网站上使用 bxSlider。 slider 应在窗口调整大小时重新加载。通过代码，我实际上使用 slider 在加载和调整大小时加载。但 slider 没有重新加载，而是第二次加载。所以我有
javascript - BxSlider 最小和最大幻灯片不起作用
我的中大约有 10-15 张幻灯片。最大幻灯片数为 4，但仅显示 1 张幻灯片。页面加载时， slider “闪烁”，并显示 4 张幻灯片，但之后又显示一张幻灯片。 slider 出了什么问题？感
slideshow - bxslider 如何制作像轮播一样的缩略图？
我使用这个 slider http://bxslider.com/examples/thumbnail-pager-1 。它有效，但我有很多元素，缩略图不适合一行并移至下一行。如何像轮播一样制作缩略图
bxslider - 使用bxslider，有没有办法删除或隐藏幻灯片底部的项目符号？
我正在使用 bxslider 制作一个简单的轮播，每张幻灯片一张 jpg。因为我有 8 张 jpg，所以每张幻灯片底部显示 8 个项目符号。我有什么方法可以删除或隐藏它们。最佳答案 bxslider
javascript - 具有多个实例和自定义控件的 BXSlider
我目前已经在我正在开发的网站上实现了 bxslider。相关页面上有 3 个 slider ，带有自定义下一个和上一个控件。我使用类而不是 id 设置了 bxslider。 $('.carousel
javascript - bxslider 自定义下一张幻灯片按钮
我正在使用一个使用 jQuery bxslider 脚本的 WordPress 网站，并尝试在其中一张幻灯片的内容中编写一个 href 链接，单击该链接即可转到下一张幻灯片。我对 php 以及 bx
javascript - bxSlider 最后一张幻灯片为空
我已将 bxSlider 集成到现有应用程序中，显示三张不同的幻灯片。每张幻灯片都包含一个 HTML Canvas ，该 Canvas 会定期更新为新的 JCharts 图表。它工作完美!只是...最
javascript - 停止加载时自动播放视频 - BXSlider
我在我的一个网站中使用 bxslider 作为简单的视频 slider 。但 slider 中的所有视频都会开始加载播放。我必须禁用它。 HTML: result() as $vdo){
whitespace - Bxslider 不需要的顶部和底部空白
我不确定 slider 顶部和底部的额外空白来自哪里。是填充还是边距？如果有人可以帮助我，我将不胜感激。 jsfiddle.net/fH3EL 最佳答案这是因为 bx-slider CSS 文件造成
bxslider infiniteloop 向左滚动到第一张幻灯片而不是向右滚动到循环
我似乎遇到了一个我没有在其他地方看到的问题。我们在客户网站 (www.laparksfoundation.org) 上有一个 slider 。我们将 slider 设置为 infiniteloop

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 设置 bxSlider 幻灯片放映哪里出错了？