부트 스트랩 캐 루젤 기능 없음

Question

부트 스트랩과 함께 번들로 제공되는 Laravel 5.5에서 제대로 작동하는 메인 JS 파일 (예 : larvel mix가 적절하게로드 된 모든 js 파일로 컴파일 됨)이 작동합니다. 그러나 부트 스트랩 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 파일의

내 html 파일 아래에있는 내 코드입니다. 그리고 지금은 콘솔에 어떤 오류도 발생하지 않으므로 잘못된 점에 대한 단서가 없습니다.

도와주세요 :(

Answer 1

블레이드 파일에

부트 스트랩 카로틴.

당신의 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> 

이

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

처럼이 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> 

이 다음 단계를 사용하여 carousal이 작동합니다.

내가이 당신이 당신의 문제를 해결하는 데 도움이되기를 바랍니다