引导旋转木制不起作用

Question

我在Laravel 5.5中工作，该5.5与Bootstrap捆绑在一起，并且我的主JS文件适当地运行（即Laravel Mix comply comply comply comply comply comply poade comply local copply copply comploce comply。但是，Bootstrap 3.3.7的旋转木制根本无法正常工作。过渡（幻灯片动作）不起作用，并且按钮根本不起作用。这是我的代码

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
require('./animations');
window.Vue = require('vue');
// *
//  * Next, we will create a fresh Vue application instance and attach it to
//  * the page. Then, you may begin adding components to this application
//  * or customize the JavaScript scaffolding to fit your unique needs.
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
  el: '.content'
});

<script type="text/javascript" src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/main.css') }}" rel="stylesheet"> . .. ...
<div class="container-fluid content">
  <div class="carousel slide" id="features">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#features" data-slide-to="0" class="active"></li>
      <li data-target="#features" data-slide-to="1"></li>
      <li data-target="#features" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="/images/niceview.jpg">
        <div class="carousel-caption">
          <h4 class="carousel-header">Lorem Ipsum</h4>
          <p class="carousel-text">Some Lorem ipsum.</p>
        </div>
      </div>
    </div>
    <div class="carousel-inner">
      <div class="item">
        <img src="/images/rear.jpg">
        <div class="carousel-caption">
          <h4 class="carousel-header">Dreams</h4>
          <p class="carousel-text">Lorem ipsum</p>
        </div>
      </div>
    </div>
    <div class="carousel-inner">
      <div class="item">
        <img src="/images/view.jpg">
        <div class="carousel-caption">
          <h4 class="carousel-header">Dreams</h4>
          <p class="carousel-text">Lorem ipsum</p>
        </div>
      </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#features" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#features" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</div>

那是我的JS文件，它通过Mix和我的HTML文件成功编译。现在，我没有在控制台上遇到任何错误，所以我不知道有什么问题。

请帮助：（

Answer 1

刀片文件中的bootstrap carousal。

将此添加到您的filename.blade.php

        <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="{{ asset('public/images/1.jpg')}}" alt="" style="width:100%;">
            </div>
            <div class="item">
                <img src="{{ asset('public/images/2.jpg')}}" alt="" style="width:100%;">
            </div>
            <div class="item">
                <img src="{{ asset('public/images/3.jpg')}}" alt="" style="width:100%;">
            </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

添加此CSS文件

<link href="{{ asset('public/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>

并添加像这样的JS

<script type="text/javascript" src="{{ asset('public/js/jQuery-2.1.4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('public/js/bootstrap.min.js') }}"></script>

使用以下步骤旋转式旋转术是有效的。

我希望这将帮助您解决问题