title: Cannot read property 'slice' of undefined when applying carousel from bootstrap on WordPress
body: <p>I am trying to use carousel.js from Bootstrap on Wordpress. I use a simple wordpress theme--<strong>Twenty Fourteen</strong> and then add the above code into a new page. No other js file is included. <strong>It doesn't work for me on Both Safari and chrome.</strong> </p>
  
  <p>It is frustrating to see the this: 
  <a href="http://g.recordit.co/cOEbBrW0FQ.gif" rel="nofollow">http://g.recordit.co/cOEbBrW0FQ.gif</a></p>
  
  <p>The slides works well when turning left. However, when it comes to right end, it would trigger an error message and then doesn't work again! </p>
  
  <p><strong>Besides, the code above does work when I just put it into a individual html file(without influence of wordpress).</strong></p>
  
  <p><a href="http://tinypic.com/r/28c0eig/8" rel="nofollow">http://tinypic.com/r/28c0eig/8</a></p>
  
  <p>Sorry for image missing here(since my reputation is less than 10)</p>
  
  <p>Here is the test code:</p>
  
  <pre><code>   &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"&gt;
     &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h3&gt;Image 1&lt;/h3&gt;
          &lt;p&gt;This is my first image!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h3&gt;Image 2&lt;/h3&gt;
          &lt;p&gt;This is my second image!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h3&gt;Image 3&lt;/h3&gt;
          &lt;p&gt;This is my third image!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone explain why does it happen? Thanks in advance!!</p>