Question

我无法使用carousel(number)方法更改为图片。我的HTML如下：

<div class="carousel slide" id="my-carousel-id">
        <div class="carousel-inner">
            <div class="item active">
               <img src="http://placehold.it/1200x480&text=one" alt="" />
               <div class="carousel-caption">
                    <p>Image 1</p>
                </div>
            </div>
         ...
</div>

要更改图像，我使用以下jQuery

$(document).ready(function(){
    $('.carousel').carousel();
    $('[id^=carousel-selector-]').click( function(){
        var id_selector = $(this).attr("id");
        var id = id_selector.substr(id_selector.length -1);
        id = parseInt(id);
        console.log(id);
        $('#this-carousel-id').carousel(id);
    });
});

代码工作正常，直到使用.carousel(id)方法，但没有任何反应，但id正确传递。我的问题是为什么这种方法不起作用？

Answer 1

您还可以使用本机引导程序轮播控件：

<ol class="carousel-indicators">
  <li data-target="#my-carousel-id" data-slide-to="0" class="active"></li>
  <li data-target="#my-carousel-id" data-slide-to="1"></li>
  <li data-target="#my-carousel-id" data-slide-to="2"></li>
</ol>

但是如果你想使用自定义轮播控件，你需要传递索引0 based, similar to an array。

你的轮播ID是错误的，也许这就是为什么它不适合你。在您的js代码中，您使用$（'＃this-carousel-id'）而不是$（'＃my-carousel-id'）。

我已在jsfiddle, check it out.

上为您创建了一个工作示例

Bootstrap .carousel（号码）不起作用

1 个答案: