Bootstrap 轮播 不起作用

Question

我在 Laravel 5.5 中工作，它与 Bootstrap 捆绑在一起，并且我的主 JS 文件正常运行（即 laravel 混合编译与适当加载的所有 js 文件）。但是，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

刀片文件中的引导轮播。

将此添加到您的文件名.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>

使用以下步骤轮播是可行的。

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