CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapjquery-templates
Morteza Asadi
Morteza Asadi

Reputation: 1855

Bootstrap Carousel TypeError: e[g] is not a function

I'm trying to create a bootstrap carousel from my json data, and I use jQuery-Template to render this carousel, (In other words, I create my carousel slider dynamically from my json data with use jQuery-Template). Here is my code:

    <div id="main-slide-show" class="slide-show" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
        </div>
    </div>
    <script class="tmpl-gallery-slider" type="text/html">
        <div class="item">
            <img src="/content/{{html file.fileName}}" alt="{{html title}}">
        </div>
   </script>

and my call-back function (after rendering with jQuery-Template) is like below:

function mainSliderCallback() {
        $(".carousel-inner .item").each(function(i){
            $(".carousel-indicators").append('<li data-target="#main-slide-show" data-slide-to="'+i+'"></li>');
        });
        $(".carousel-inner .item").first().addClass("active");
        $(".carousel-indicators li").first().addClass("active");

        $('.carousel-indicators li').bind('click', function (e) {
            $('#main-slide-show').carousel($(e.target).attr('data-slide-to'));
        });
    }

but when I click on carousel's indicators, I receive this error from bootstrap.min.js:

TypeError: e[g] is not a function

In other hand, after loading of the page is complete, using this code in Firebug, change carousel to slide 1 with no error:

$('#main-slide-show').carousel(1);

now my question is what is wrong in my code/solution?

Upvotes: 1

Views: 3188

Answers (3)

Łukasz Szpak
Łukasz Szpak

Reputation: 31

As this is first record in google maybe it will help somebody:

<a class="carousel-control"  data-slide="1" href="#carousel">
<!-- change data-slide to "data-slide-to" -->
<a class="carousel-control"  data-slide-to="1" href="#carousel">

Good luck

Upvotes: 0

d7p4x
d7p4x

Reputation: 489

I had the same issue, just make your "slide to" param to integer, and everything will be all right.

Instead

 $('#main-slide-show').carousel($(e.target).attr('data-slide-to'));

use

var slideTo= $(e.target).attr('data-slide-to');
$('#main-slide-show').carousel(parseInt(slideTo));

Upvotes: 3

tenuki
tenuki

Reputation: 181

I had the same problem, but it was related to how I linked the carousel controls.

Because of some code editor's plugin pretty-print/beautify or maybe the copy&paste from the webpage, there was an extra space breaking this controls code, check the extra space after next in the first line data-slide (you'll have to scroll to the right to see it) :

<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next ">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

After removing the extra and using this, everything goes ok:

<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

PS: there were other attributes with extra spaces before the closing " but that particular attribute was the key in my case.

Upvotes: 1

Related Questions