Question

我正在尝试在Laravel 5.2中制作一个基本的Bootstrap Carousel。下面的代码工作正常，但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>

Answer 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') }}">

laravel 5.2创建bootstrap轮播

1 个答案: