CODEWITHSUNDEEP
javascriptwordpresstwitter-bootstrap
user3920796
user3920796

Reputation: 35

Cannot read property 'slice' of undefined when applying carousel from bootstrap on WordPress

I am trying to use carousel.js from Bootstrap on Wordpress. I use a simple wordpress theme--Twenty Fourteen and then add the above code into a new page. No other js file is included. It doesn't work for me on Both Safari and chrome.

It is frustrating to see the this: http://g.recordit.co/cOEbBrW0FQ.gif

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!

Besides, the code above does work when I just put it into a individual html file(without influence of wordpress).

http://tinypic.com/r/28c0eig/8

Sorry for image missing here(since my reputation is less than 10)

Here is the test code:

   <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Image 1</h3>
        <p>This is my first image!</p>
      </div>
    </div>
    <div class="item">
      <img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Image 2</h3>
        <p>This is my second image!</p>
      </div>
    </div>
    <div class="item">
      <img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Image 3</h3>
        <p>This is my third image!</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Can anyone explain why does it happen? Thanks in advance!!

Upvotes: 1

Views: 9315

Answers (6)

Anil Gupta
Anil Gupta

Reputation: 632

Please refer below answer as its worked for me. I had just removed data-ride="carousel"

Bootstrap Carousel: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

Upvotes: 0

Fo Nko
Fo Nko

Reputation: 632

In my case, I was using bootstrap from a understrap theme which already has a definition for bootstrap js but, stupid as it sounds, I already had my own bootsrap.js hooked in wp_enqueue_scripts, that silly step took 4 hours of my precious life.

Upvotes: 0

Adil Ali
Adil Ali

Reputation: 81

Actually on further development, the issue had to do with not setting the FIRST ITEM "active". You can leave the .slide there but you must have one active to start. – geilt

This solution is working with slide effect.

Upvotes: 4

Jason Murray
Jason Murray

Reputation: 93

This is a little late but look at the source that is being rendered in the browser. Wordpress has a habit of wrapping elements in p tags. In my case I found that Wordpress was adding an empty paragraph in in my carousel-inner and this was causing the issue.

To fix I removed all the whitespace between my closing divs for the carousel in Wordpress.

Upvotes: 1

Mick Buckley
Mick Buckley

Reputation: 176

I just got exactly the same thing with Bootstrap 3.2.0 and Wordpress 3.9.2, and found a way round it in my case.

I was using a Wordpress shortcode to output the carousel content. Unfortunately the wpautop filter added some unwanted markup to the output and this broke the carousel.

The short term fix was to remove the wpautop filter. I added this line to functions.php

remove_filter( 'the_content', 'wpautop' );

Hope this helps someone.

Upvotes: 7

geilt
geilt

Reputation: 805

I had to remove the class .slide from the main div where you define .carousel to fix that issue. Also I suggest initializing in your own custom JS as well since Wordpress doesn't use the $ variable for jQuery by default may cause issues.

Upvotes: 1

Related Questions