如何创建bootstrap展示库

Question

我正在使用bootstrap 3和vb asp.net

我看到了这个惊人的图像展示画廊。我正在使用bootstrap所以如何使用bootstrap 3重新创建它？它也应该在移动设备上工作，就像这个网站一样。

https://www.decjuba.com.au/collections/women/products/blair-voila-embroidered-tee-brightwht

这是我尝试过的。我创建了一个基本的bootstrap轮播。我已经使用转发器连接到数据库并获取图像路径。

现在我的代码并没有为主滑块显示任何内容。知道为什么会这样吗？

 <!-- sub slider -->
<script>
    $('.carousel .vertical .item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        for (var i = 1; i < 2; i++) {
            next = next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }

            next.children(':first-child').clone().appendTo($(this));
        }
    });
    </script>

     <!-- main slider -->
        <script type="text/javascript">
        $(document).ready(function () {
            $('.carousel').carousel({
                interval: 20000
            });

            $('.item')[0].className = "item active";
        });
    </script>


        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
            <div id="carousel-pager" class="carousel slide " data-ride="carousel" data-interval="1000">
                <div class="carousel-inner vertical">
                    <div class="active item">
                        <img src="http://placehold.it/600/f44336/000000&text=First+Slide" class="img-responsive" data-target="#theCarousel" data-slide-to="0">
                    </div>
                    <div class="item">
                        <img src="http://placehold.it/600/e91e63/000000&text=Second+Slide" class="img-responsive" data-target="#theCarousel" data-slide-to="1">
                    </div>
                    <div class="item">
                        <img src="http://placehold.it/600/9c27b0/000000&text=Third+Slide" class="img-responsive" data-target="#theCarousel" data-slide-to="2">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5 col-md-12 col-sm-12 col-xs-12">

        <div id="theCarousel" class="carousel slide" data-ride="carousel">      
            <div class="carousel-inner">
                <asp:Repeater ID="ShopDetailGalleryRepeater" runat="server">
                    <ItemTemplate>
                        <div class="item">
                            <div class="thumbnail">
                                <asp:Image ID="imgId" 
                                    ImageUrl='<%# "../.." + Eval("Picture_Path").ToString() %>' 
                                    style="" class="img-respo" runat="server"  />
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>