laravel 5.2 创建引导轮播答案

【问题标题】：laravel 5.2 creating bootstrap carousellaravel 5.2 创建引导轮播
【发布时间】：2016-10-13 02:22:54
【问题描述】：

我正在尝试在 Laravel 5.2 中制作基本的 Bootstrap Carousel。下面的代码工作得很好，但是轮播不会自动移动，或者当我单击上一个/下一个箭头时。

我认为这与我调用 jquery.js 和 bootstrap.js 脚本的方式有关。在 Laravel 之外我会这样做，

<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>

基本上我正在尝试在 Laravel 中执行此操作，但它不起作用。下面是我的尝试。 Bootstrap 主题运行良好，Carousel 显示但不移动。提前道歉，因为我对 Laravel 很陌生。

<!DOCTYPE html>
<html>
<head>
      <link rel="stylesheet" href="{{ asset('bootstrap/css/bootstrap.css') }}">
      <link rel="stylesheet" href="{{ asset('bootstrap/js/bootstrap.js') }}">
      <link rel="stylesheet" href="{{ asset('css/main.css') }}">
</head>
<body>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

      <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <div class="carousel-inner" role="listbox">

          <div class="item active">
              <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First Slide">
              <div class="container">
                  <div class="carousel-caption">
                      <h1>Test Header</h1>
                      <p>Input Text Here</p>
                  </div>
              </div>
          </div>

          <div class="item">
              <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second Slide">
              <div class="container">
                  <div class="carousel-caption">
                      <h1>Test Header 2</h1>
                      <p>Input Text Here</p>
                  </div>
              </div>
          </div>

          <div class="item">
              <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third Slide">
              <div class="container">
                  <div class="carousel-caption">
                      <h1>Test Header 3</h1>
                      <p>Input Text Here</p>
                  </div>
              </div>
          </div>
      </div>

      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>

  </div>

<link rel="script" href="{{ asset('jquery.js') }}">
<link rel="script" href="{{ asset('bootstrap/js/bootstrap.js') }}">

</body>
</html>

【问题讨论】：

标签： jquery html twitter-bootstrap laravel

【解决方案1】：

“轮播不移动”的意思是“页面没有javascript”。从您的页面检查bootstrap.js 和query.js 的路径。
检查您服务器上 jquery.js 和 bootstrap.js 的权限。
尝试使用CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script‌> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

您尝试连接bootstrap.js 两次 - 在<head> 和<body> 的末尾。删除第一个。
对脚本使用另一种语法。你需要使用

<script src="{{ asset('jquery.js') }}"></script>
<script src="{{ asset('bootstrap/js/bootstrap.js') }}"></script>

而不是

<link rel="script" href="{{ asset('jquery.js') }}">
<link rel="script" href="{{ asset('bootstrap/js/bootstrap.js') }}">

【讨论】：

我删除了其中一个链接。还检查了 jquery.js 是否在我的 Laravel 公用文件夹中。路径应该是正确的，但这似乎仍然不起作用。更新：现在只是查看其他路径。
@MoMo 你能给我你页面的链接吗？
@MoMo 尝试打开“查看页面源代码”，然后点击bootstrap.js 上的链接。浏览器能打开吗？
当我点击 bootstrap.js 上的链接时，它会从查看源代码中打开它。
感谢帮助，我想我已经找到问题了——Bootstrap 的 JavaScript 需要 jQuery 1.9.1 或更高版本，但低于 3 版（我目前安装的是 3 版）。