Question

我在我的xpages中实现了bootstrap轮播，它在自动模式下工作正常。但是我无法手动切换图片（悬停停止也很好）。

以下是从我的xpage创建的代码。好的，id标签看起来有点奇怪。 href的计算......

<div id="view:_id1:_id215:carousel" class="carousel slide">
<div id="view:_id1:_id215:carousel_inner" class="carousel-inner">
<div id="view:_id1:_id215:carousel_inner:0:Image" class="item active">
<img id="view:_id1:_id215:carousel_inner:0:image1" src="....jpg" alt="" class="viewphoto"></div>
<div id="view:_id1:_id215:carousel_inner:1:Image" class="item">
<img id="view:_id1:_id215:carousel_inner:1:image1" src="....jpg" alt="" class="viewphoto"></div>
<div id="view:_id1:_id215:carousel_inner:2:Image" class="item">
<img id="view:_id1:_id215:carousel_inner:2:image1" src="....jpg" alt="" class="viewphoto"></div>
</div>
<a id="view:_id1:_id215:cLeft" href="#view:_id1:_id215:carousel" class="carousel-control left" data-slide="prev">&lt;</a>
<a id="view:_id1:_id215:cRight" href="#view:_id1:_id215:carousel" class="carousel-control right" data-slide="next">&gt;</a>
</div>
</div>

这就是xpage代码的外观（作为附加信息）

    <xp:panel id="carousel" styleClass="carousel slide">
        <xp:repeat id="carousel_inner" rows="30" value="#{view1}"
            var="cImages" styleClass="carousel-inner">

            <xp:panel id="Image">

                <xp:this.styleClass><![CDATA[#{javascript:if (sessionScope.carCount == 1){
                sessionScope.carCount = 2;
                        return "item active";
                    } else {
                        return "item"
                }}]]></xp:this.styleClass>

                <xp:image id="image1" styleClass="viewphoto">
                    <xp:this.url><![CDATA[#{javascript:getCImageHTML(cImages.getDocument(), "fnImage", "Image")}]]></xp:this.url>
                </xp:image>

                <xp:panel styleClass="carousel-caption" id="caption">
                    <h4>Thumbnaillabel header</h4>
                    <xp:label value="Aloha some description" id="label1"></xp:label>
                </xp:panel>
            </xp:panel>
        </xp:repeat>

        <xp:link escape="true" id="cLeft" styleClass="carousel-control left"
            value="##{id:carousel}">
            <xp:this.text><![CDATA[<]]></xp:this.text>
            <xp:this.attrs>
                <xp:attr name="data-slide" value="prev"></xp:attr>
            </xp:this.attrs>
        </xp:link>

        <xp:link escape="true" id="cRight" styleClass="carousel-control right"
            value="##{id:carousel}">
            <xp:this.text><![CDATA[>]]></xp:this.text>
            <xp:this.attrs>
                <xp:attr name="data-slide" value="next"></xp:attr>
            </xp:this.attrs>
        </xp:link>
    </xp:panel>

所以也许有人有个主意。或者由于计算的id标签，它可能无法实现。

Answer 1

好的，我弄清楚问题是什么。 ID-Tags中的'：'是问题所在。 'slide-prev / next'不适用于它，因为它是jQuery中的一个特殊字符。

所以我创建了一个用反斜杠伪装冒号的函数。

现在工作正常

由于阿明

Answer 2

希望我能看到更多代码。您在文档中的哪个位置定义了以下内容？

的jquery.js
bootstrap.js
自举-carousel.js
bootstrap.css

此外，您的轮播是否与所有资源/ js / css定义分开设置？我在我的每个组件的末尾添加了我的jquery和bootstrap js作为静态定义（否则我失去了一些功能，jquery只在我的页面部分生效，在xe：dynamicContent控件的单页面应用程序中）

xpages中的bootstrap轮播不是手动滑动

2 个答案: