Using Bootstrap 3 carousel slider in Cakephp

Question

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)

Use the console in your web browser - are there any javascript errors on your page? — tchow002
Thanks for the prompt response. Here is the error! Uncaught ReferenceError: jQuery is not defined bootstrap.js:88 (anonymous function) — shabk
Here is the whole list of errors: GET ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min 404 (Not Found) front:8 Uncaught ReferenceError: jQuery is not defined bootstrap.js:88 (anonymous function) bootstrap.js:88 Uncaught ReferenceError: jQuery is not defined — shabk
So that 404 means your link to jquery is invalid. The next error is saying jquery is undefined which is related to the first 404. I posted an answer with a valid link to jquery - would you mind trying it. — tchow002
Thanks! Yes, I didn't know how to debug it. I used console and could fix the problem. :) Arrows work while it doesn't not circle through the images. Any suggestion? — shabk

tchow002 tchow002 · Accepted Answer · 2014-03-14T02:28:06

Try changing

echo $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min');

to

echo $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min doesn't seem to be a valid link.

It also seems that you need to wrap your carousel inner inside a div and then initialize it.

Changes to your html:

<div id="this-carousel-id" class="carousel slide">
  <div class="carousel-inner">
    .
    .
    .
  </div>
</div>

And add this js:

$(document).ready(function(){
  $('.carousel').carousel();
});

Using Bootstrap 3 carousel slider in Cakephp

1 Answers