带有缩略图的Bootstrap轮播无法在动态代码中工作

时间:2015-10-19 06:06:22

标签: javascript jquery css twitter-bootstrap

我正在添加带缩略图的bootstrap轮播滑块。所有图像都以源代码形式出现,但主图像未显示。

<div class="gallery-slider col-xs-6">
                <div id="slider">
                    <!-- Top part of the slider -->
                    <?php
                    $images=explode(',',$item['my_images']);
                    ?>
                    <div class="row">
                        <div class="col-xs-12" id="carousel-bounding-box">
                            <div class="carousel slide" id="myCarousel">
                                <!-- Carousel items -->
                                <div class="carousel-inner">
                                    <?php
                                    for($i=0;$i<count($images);$i++) {

                                        ?>
                                        <div class="item" data-slide-number="<?php echo $i;?>">
                                            <img src="<?php echo base_url() . 'img/' . $images[$i]?>">
                                        </div>
                                    <?php
                                    }
                                    ?>

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

                </div>

                <ul class="hide-bullets col-xs-12">
                    <?php
                    for($i=0;$i<count($images);$i++) {
                    ?>
                    <li class="col-xs-4 col-sm-4">
                        <a class="thumbnail" id="carousel-selector-<?php echo $i;?>">
                            <img src="<?php echo base_url().'img/'.$images[$i]?>">
                        </a>
                    </li>
                    <?php
                    }
                    ?>

                </ul>

            </div>


 $('.carousel-inner .item').first().addClass('active');

我通过jquery添加了活动类。但这不起作用我不知道这有什么问题。

0 个答案:

没有答案