Question

我从SharePoint REST API中提取图像，并将调用和HTML一起编写到HTML文档中。

特别是Bootstrap Modal Carousel。

我将所有图片和内容写入一些图块。问题是模态中的图像。

用户点击一个图标，Modal触发，Carousel显示的第一个图像，但它不会导航下一个/上一个，即使正在为每个图像编写HTML。

这是HTML：

<div class="container"> 

        <!-- GLOBAL NAVIGATION -->
        <div class="row">
            <div class="col-md-12">
                <script type="text/javascript" src="/js/nav.js"></script>
            </div>
        </div><!-- /end global nav -->



        <!-- TILE WRAPPER -->
        <div class="row bgTexture bgTexture2 ">
            <div class="col-md-12">

        <!-- TOP ROW OF TILES -->
        <div class="row aoTilesTopWrapper">
            <h2>TITLE GOES HERE</h2>  


            <!-- ///////// BOOTSTRAP ROTATOR -->
            <div class=" col-md-12 allModals">








            </div><!-- /end allModals -->









            </div>
            <!-- ///////// end bootstrap modal -->
        </div><!-- /end row - top row  -->


        <!-- BOTTOM ROW OF TILES -->
        <div class="row aoTilesBottomWrapper">

            <!-- BOTTOM ROW TILES GO HERE -->


        </div><!-- /end row - bottom row  -->
            </div><!-- /end col-md-12 -->




            </div><!-- /end main row -->

        </div><!-- /end container /content -->


    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="/js/custom.js" charset="utf-8"></script>
    <script src="/js/add-ons.js" charset="utf-8"></script>
    <script>    
    // Select third list item
    var liToSelect = 7;
    $(".nav.nav-pills li:eq("+(liToSelect-1)+")").addClass("active");


    $(document).ready(function(){
        addOns();

    });

    $('.carousel').carousel({
        pause: true,
        interval: false
    });



    </script>

JS / Ajax的：

function addOns(){
    $.ajax({
        async: false,
        url: "/_api/lists/getByTitle('Products')/items",
        type: "GET",
        headers: { "Content-Type": "application/json;odata=verbose", "Accept": "application/json;odata=verbose" },
        success: function (data) {  
            $.each(data.d.results, function () {
                var itemID = this.Id;
                // Image tiles
                var aoTiles = "<div class='col-sm-4 tile' data-imageID='" + this.Id + "'><span class='openRotator' data-toggle='modal' data-target='.itemID" + this.Id + "'><a href='#'><img src='/media/new-window-icon.png' width='20'/></a></span><div class='tileImg'><img src='" + this.Tile_x0020_Thumbnail_.Url + "'/></div><div class='tileTitle'>" + this.Title + "</div><div class='tilePrice'>" + this.Content_x0020_Starting_x.toFixed(2) + "</div></div>";
                $(".aoTilesTopWrapper").append(aoTiles);

                // Modal
                $(".allModals").append("<div class='modal fade bs-example-modal-lg itemID" + this.Id + "' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel' aria-hidden='true'><div class='modal-dialog modal-lg'><div class='modal-content'><div id='carouselId" + this.ID + "' class='carousel slide' data-ride='carousel'><!-- Wrapper for slides --><div id='carousel' class='carousel-inner'><!-- Gallery images go here --></div><!-- Controls --><a class='left carousel-control' href='#carouselId" + this.Id + "' role='button' data-slide='prev'></a> <a class='right carousel-control' href='#carouselId" + this.Id + "' role='button' data-slide='next'></a></div></div></div></div>");

                // Carousel divs002
                $.each(this.Carousel_x0020_Image_x002.split(";"), function () {
                    $(".modal.itemID"+ itemID +" .carousel-inner").append("<div class='item'><img src='" + this + "'/></div>");
                });


            });


        },
        error: function (data) {
            alert(data.statusText);
        }
    });

    return true;
}

知道为什么旋转木马图像不会滑动？

Answer 1

你会笑的。第一个<div class="item">需要.active类才能使其正常工作。

咄！

从SharePoint获取映像到Bootstrap模式/轮播

1 个答案: