引导轮播类型错误：e[g] 不是函数答案

【问题标题】：Bootstrap Carousel TypeError: e[g] is not a function引导轮播类型错误：e[g] 不是函数
【发布时间】：2017-01-25 13:04:37
【问题描述】：

我正在尝试从我的json 数据创建一个bootstrap carousel，并且我使用jQuery-Template 来呈现这个轮播，（换句话说，我使用我的json 数据动态创建我的轮播滑块jQuery-Template)。这是我的代码：

    <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>

我的回调函数（使用jQuery-Template 渲染后）如下：

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

但是当我点击轮播的指标时，我从 bootstrap.min.js 收到这个错误：

TypeError: e[g] 不是函数

另一方面，页面加载完成后，在 Firebug 中使用此代码，将 carousel 更改为幻灯片 1，没有错误：

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

现在我的问题是我的代码/解决方案有什么问题？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap jquery-templates

【解决方案1】：

我有同样的问题，但它与我如何链接轮播控件有关。

由于某些代码编辑器的插件漂亮打印/美化或者可能是从网页复制和粘贴，有一个额外的空间破坏了这个控制代码，检查第一行数据幻灯片中next 之后的额外空间（你'必须向右滚动才能看到它）：

<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>

删除多余的并使用它后，一切正常：

<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：在结束 " 之前还有其他带有额外空格的属性，但在我的情况下，该特定属性是关键。

【讨论】：

【解决方案2】：

我遇到了同样的问题，只需将您的“滑动到”参数设置为整数，一切都会好起来的。

相反

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

使用

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

【讨论】：

很好的答案！谢谢！

【解决方案3】：

因为这是谷歌的第一条记录，也许它会对某人有所帮助：

<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">

祝你好运

【讨论】：