Question

我在我的叠加层中有一个自己编写的图像查看器的HTML代码：

<div class="carousel slide" id="imgViewer">
        <div class="carousel-inner">
            <div id="item1" class="item active">
                <div id="pic1">
                    <center>
                          <img style="height: 100%;" src="./upload/offers/6/img.jpg" alt="">
                    </center>
                 </div>
            </div>
            <div id="item2" class="item ">
               <div id="pic2">
                 <center>
                   <img style="height: 100%;" src="./upload/offers/6/img2.jpg" alt="">
                 </center>
                </div>
            </div>
</div>
</div>

这是主视图（左侧的滑块）。

在右侧，我可以看到滑块中可见的所有图像的另一个视图。这是我最后一次尝试......

<a href="#item1" data-toggle="carousel-toggle" data-slide=""><img style="vertical-align: middle;" src="./upload/offers/6/img.jpg" alt="" /></a>

问题是：它不能像这样工作......我想跳到滑块中点击的图像......我怎么能意识到这一点？

Answer 1

您可以向图像添加onClick事件。该事件可以将类更改为您想要显示的图像的div处于活动状态。

<div id="item1" class="item active">

“活跃”类是显示的幻灯片。

Answer 2

$('#item1').click(function() {
                $('#item1, #item2, #item3, #item4, #item5, #item6, #item7').removeClass('active');
                $('#item1').addClass('active');
                return true;
            });

好的以为我可以用bootstrap做一些事情，比如data-toggle carousel ......

data-slide-to

这将为每个正在搜索它的人做到这一点......

bootstrap数据切换轮播

2 个答案: