MoMo MoMo - 5 months ago 115
jQuery Question

laravel 5.2 creating bootstrap carousel

I am trying to make a basic Bootstrap Carousel work within Laravel 5.2. The code below works just fine however the Carousel does not move automatically or when I click previous/ next arrows.

I think this has something to do with how I am calling the jquery.js and bootstrap.js scripts. Outside of Laravel I would just do this,

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


Basically I'm attempting to do this within Laravel but its not working. Below is my attempt. Bootstrap theme works just fine and the Carousel displays but does not move. Apologies in advance as I am quite new to 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. "The carousel does not move" means "page has no javascript". Check the path to bootstrap.js and query.js from your page.

  2. You are trying to connect bootstrap.js twice - in the <head> and at the end of the <body>. Remove the first of them.

  3. Use another syntax for scripts. You need to use

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

instead of

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