jquery - 如何在一排显示更多轮播？

Question

我想建立一个图片库。每张图片代表一组图像。我意识到一个很好的解决方案是:每个图像都会触发一个模态，在模态内部我会将轮播放在显示其他图像的位置。但我遇到了一个问题，我无法使轮播正常工作(它们嵌入一排)。请检查 jsfiddle 了解更多信息:https://jsfiddle.net/r0ukv00d/4/

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg" height="42" width="42" data-toggle="modal" data-target="#myModal"><h5>
        Click on the image and you will be able to see images from Iceland.
        </h5>
            <div id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <!-- Modal content-->
                            <div id="carousel-1" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-1" data-slide-to="1"></li>
                                    <li data-target="#carousel-1" data-slide-to="2"></li>
                                </ol>
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg" alt="...">
                                        <div class="carousel-caption"> Iceland1 </div>
                                    </div>
                                    <div class="item"> <img src="http://www.icelandprocruises.co.uk/media/img/gallery/home/0002-gallery-iceland-waterfall-1.jpg" alt="...">
                                        <div class="carousel-caption">Iceland2 </div>
                                    </div>
                                    <div class="item"> <img src="http://querzy.com/wp-content/uploads/2016/06/iceland.jpg" alt="...">
                                        <div class="carousel-caption"> Iceland3 </div>
                                    </div>
                                </div>
                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
                                <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                            </div>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12"> <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg" height="42" width="42" data-toggle="modal" data-target="#myModal">
        <h5>
        Click on the image and you will be able to see images from Brazil.
        </h5>
        <h3 style="color:red">
       Second carousel is not working! It shows pictures from Iceland instead of Brazil!
        </h3>
            <div id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <!-- Modal content-->
                            <div id="carousel-2" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-2" data-slide-to="1"></li>
                                    <li data-target="#carousel-2" data-slide-to="2"></li>
                                </ol>
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active"> <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg" alt="...">
                                        <div class="carousel-caption"> Brazil1 </div>
                                    </div>
                                    <div class="item"> <img src="http://www.sportiputovanja.hr/wp-content/uploads/2016/12/RIO-BEACH.jpg" alt="...">
                                        <div class="carousel-caption"> Brazil2 </div>
                                    </div>
                                    <div class="item"> <img src="http://riotimesonline.com/wp-content/uploads/2014/01/Fernando-Maia-Riotur.png" alt="...">
                                        <div class="carousel-caption"> Brazil3 </div>
                                    </div>
                                </div>
                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-2" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
                                <a class="right carousel-control" href="#carousel-2" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                            </div>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
</div>

Answer 1

您正在为两个图像调用相同的模型 ID。请参阅https://jsfiddle.net/r0ukv00d/5/更新代码

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg" height="42" width="42" data-toggle="modal" data-target="#myModal"><h5>
        Click on the image and you will be able to see images from Iceland.
        </h5>
            <div id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <!-- Modal content-->
                            <div id="carousel-1" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-1" data-slide-to="1"></li>
                                    <li data-target="#carousel-1" data-slide-to="2"></li>
                                </ol>
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg" alt="...">
                                        <div class="carousel-caption"> Iceland1 </div>
                                    </div>
                                    <div class="item"> <img src="http://www.icelandprocruises.co.uk/media/img/gallery/home/0002-gallery-iceland-waterfall-1.jpg" alt="...">
                                        <div class="carousel-caption">Iceland2 </div>
                                    </div>
                                    <div class="item"> <img src="http://querzy.com/wp-content/uploads/2016/06/iceland.jpg" alt="...">
                                        <div class="carousel-caption"> Iceland3 </div>
                                    </div>
                                </div>
                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
                                <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                            </div>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12"> <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg" height="42" width="42" data-toggle="modal" data-target="#myModal1">
        <h5>
        Click on the image and you will be able to see images from Brazil.
        </h5>
        <h3 style="color:red">
       Second carousel is not working! It shows pictures from Iceland instead of Brazil!
        </h3>
            <div id="myModal1" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <!-- Modal content-->
                            <div id="carousel-2" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-2" data-slide-to="1"></li>
                                    <li data-target="#carousel-2" data-slide-to="2"></li>
                                </ol>
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active"> <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg" alt="...">
                                        <div class="carousel-caption"> Brazil1 </div>
                                    </div>
                                    <div class="item"> <img src="http://www.sportiputovanja.hr/wp-content/uploads/2016/12/RIO-BEACH.jpg" alt="...">
                                        <div class="carousel-caption"> Brazil2 </div>
                                    </div>
                                    <div class="item"> <img src="http://riotimesonline.com/wp-content/uploads/2014/01/Fernando-Maia-Riotur.png" alt="...">
                                        <div class="carousel-caption"> Brazil3 </div>
                                    </div>
                                </div>
                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-2" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
                                <a class="right carousel-control" href="#carousel-2" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                            </div>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
</div>