xpages의 부트 스트랩 캐 러셀이 수동으로 슬라이딩하지 않습니다.

Question

부트 스트랩 캐 러셀을 내 xpages에 구현했는데 자동 모드에서 올바르게 작동합니다. 그러나 수동으로 사진을 전환 할 수는 없습니다 (호버 정지는 잘 작동 함).

다음은 내 x 페이지에서 생성 된 코드입니다. 좋아, id 태그가 조금 이상해 보입니다. href를 용의합니다 ... xpage 코드 (추가 정보로) 보는 방법

<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> 

그게

<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 태그의 ':'가 문제입니다. 'slide-prev/next'는 jQuery에서 특수 문자이기 때문에 작동하지 않습니다.

그래서 백 슬래시로 콜론을 가장하는 함수를 만들었습니다.

는 이제 내가 xpage에 jquery.js, bootstrap.js 및 bootstrap.css을 추가 아르 민

Answer 2

위시 더 많은 코드를 볼 수 있습니다. 이 문서에서 다음을 정의하는 위치는 무엇입니까?

1. jquery.js
2. bootstrap.js
3. 부트 스트랩 - carousel.js
4. bootstrap.css 또한

, 모든 자원과는 별도의 사용자 지정 컨트롤에 회전 목마는 /입니다 js/css 정의? jquery와 bootstrap js를 정적 구성으로 추가하여 각 구성 요소의 끝에 배치했습니다 (jquery는 xe : dynamicContent 컨트롤을 사용하는 단일 페이지 응용 프로그램에서만 내 페이지의 일부에만 적용됩니다) .