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)

Answer 1

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();
});