1

我使用引导程序获得的“开箱即用轮播指示器”作为显示所有幻灯片的小缩略图的一种方式。它运作良好,但是,与“开箱即用指示点”不同,活动 li 不会更改为活动 - 因此我无法将 css 样式应用于活动缩略图。下面是与我的替代版本相比的开箱即用。

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


            <ol class="carousel-preview hidden-phone pull-right">
                <li data-target="#myCarousel" data-slide-to="0" class="active"><div class="preview"><a href="#"><img src="http://placehold.it/75x45" alt=""></a></div></li>
                <li data-target="#myCarousel" data-slide-to="1"><div class="preview"><a href="#"><img src="http://placehold.it/75x45" alt=""></a></div></li>
                <li data-target="#myCarousel" data-slide-to="2"><div class="preview"><a href="#"><img src="http://placehold.it/75x45" alt=""></a></div></li>
                <li data-target="#myCarousel" data-slide-to="3"><div class="preview"><a href="#"><img src="http://placehold.it/75x45" alt=""></a></div></li>
            </ol>

我不认为删除 carousel-indicators 类与我复制它有任何关系,并且它仍然具有关联的活动类。我猜它是我需要修改的引导 JS 文件?我厌倦了模拟 bootply 示例,但需要完成太多自定义样式才能复制。

当您检查指标上的元素时,您可以看到活动类从一个 li 跳到另一个,但它不会对我的指标执行此操作,任何想法都将不胜感激!

4

2 回答 2

2

bootstrap.js 文件中的第 290 行我需要添加我的类 .carousel-preview - 我留下了 .carousel-indicators 以便原始指标起作用。

              var Carousel = function (element, options) {
                this.$element = $(element)
                this.$indicators = this.$element.find('.carousel-indicators, .carousel-preview')
                this.options = options
                this.options.pause == 'hover' && this.$element
                  .on('mouseenter', $.proxy(this.pause, this))
                  .on('mouseleave', $.proxy(this.cycle, this))
              }
于 2013-06-21T09:01:33.513 回答
0

我有完全相同的问题。我发现在每个 li 元素中添加类 'item' 会使活动指示器发生变化,但是这样做会在单击轮播时给我带来另一个问题。我相当确定需要以某种方式修改 jquery 以反映类名的更改。接下来我正试图弄清楚这一点,但我想分享到目前为止我已经弄清楚的内容,以帮助让事情顺利进行。

于 2013-06-20T17:40:28.723 回答