1

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?

3 Answers 3

3

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));
1
1

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.

0

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.