I'm trying to run my bootstrap 3 slideshow code in CakePHP with no luck! It shows the first image but doesn't circle through other images. Prev and Next arrows don't work as well. It seems to be jquery problem but I don't know how to fix it. (Code runs in bootstrap php pretty fine)
Here is the details of the code:
In slideshow.ctp:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- Slide 1-->
<div class="item active">
<img src="http://placehold.it/1200x480" alt="Slide 1" />
<div class="carousel-caption">
<h1>Slide 1</h1>
<p>Slide 1 Description</p>
</div>
</div>
<!-- Slide 2-->
<div class="item">
<img src="http://placehold.it/1200x480" alt="Slide 2" />
<div class="carousel-caption">
<h1>Slide 2</h1>
<p>Slide 2 Description</p>
</div>
</div>
<!-- Slide 3-->
<div class="item">
<img src="http://placehold.it/1200x480" alt="Slide 3" />
<div class="carousel-caption">
<h1>Slide 3</h1>
<p>Slide 3 Description</p>
</div>
</div>
</div>
Copied bootstrap.js and bootstrap.min.js files into webroot/js folder.
in Controller.php: public $helpers = array('Js' => array('Jquery'));
In default.ctp:
echo $this->Html >script('http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min');
echo $this->Html->script('bootstrap');
echo $this->Html->script('bootstrap.min'); echo $this->Js->writeBuffer(); (before tag)