2014-10-11 1 views
1

거의 사용자가 프로필을 볼 수있는 깔끔한 사용자 프로필 페이지를 만들면됩니다. Wordpress에 통합 된 Bootstrap 프레임 워크로 작업하는 임. 나는 많은 정보를 얻기 위해 Bootstrap's Tabs을 사용하지만 사용자에게 분명하게 알려줍니다. "AWF I"과 "AWF II"라는 메인 탭이 두 개 있습니다. 펀드에 대한 정보가있는 탭과 Owl Carousel을 사용하여 사진을 표시합니다. The AWF I tab is active here 캐 러셀이 멋지지만 "AWF II"탭을 활성화합니다. The AWF II tab is active here 그림에서 볼 수 있듯이 사진/회전식 컨베이어 자체는 초소형이며이를 극복하는 방법을 모릅니다. 회전식 캐 러셀은 "AWF I" 탭. The correct display should be this 하지만 내가 전환 할 때 : 다음 사람에게 당신에게 왜 이런 일에 대한 몇 가지 아이디어를 줄 수있는 단서가 : 그것이 있어야처럼 내가 마우스 오른쪽 단추로 구글 크롬의 요소를 검사 할 때, 회전 목마 올바른 크기로 나옵니다 "AWF I"로 돌아 가면 그 회전식 캐 러셀에 작은 이미지가 표시되므로 기본적으로 Google 크롬을 검사하면 해당 이미지가 전환됩니다.부트 스트랩 탭이있는 올빼미 회전 목마

실마리가 있습니까? 더 많은 정보가 필요하면 알려주세요. 감사! 여기 UPDATE 01

내가 회전식 호출하는 데 사용하는 코드이다

$(document).ready(function(){ 

$("#owl-awf1-properties,#owl-awf2-properties").owlCarousel({ 
    pagination: true, 
    loop: true, 
    dots: false, 
    autoplay: true, 
    autoplayTimeout:2000, 
    autoplayHoverPause:true, 
    margin:10, 
    responsiveClass:true, 
    responsive:{ 
     0: { 
      items:2 
     }, 
     450:{ 
      items:3 
     }, 
     767:{ 
      items:4 
     }, 
     991:{ 
      items:5 
     }, 
     1199:{ 
      items:5 
     } 
    } 
}); 

}); 
+0

Owl Carousel은 페이지로드시 높이가 유지되지 않는 곳에서 사용하지 않아도됩니다. 실제로 크기를 조정해야하며 그렇지 않으면 페이지로드시 작동하지 않습니다. 탭 창 또는 패널 그룹 내용)을 선택하면 작동하지 않습니다. Owl Carousel은 반응이 좋지만 유동적이지는 않습니다. jQuery를 사용하여 반응하지만 미디어 쿼리를 사용하는 것은 아닙니다. – Christina

+0

http://jsfiddle.net/Epmwx/ - 바이올린을 만들고 도움을 얻을 수 있도록 복제 할 수 있는지 확인하십시오. – Christina

+0

고마워요! 적어도 우리는 그것이 페이지의 로딩으로 인한 것임을 알게되었습니다. 탭 버튼에 바인딩하고 사용할 수있는 jQuery가 있습니까? 회전식 슬라이드 쇼가 작동해야합니까? 나는 바이올린을 업데이트하고 내부에 이미지를 배치했는데 제대로 작동합니다. 바이올린 없이는 알아낼 수 없다면 복제를 위해 최선을 다할 것입니다.하지만 루프와 물건을 사용하기 때문에 어려울 것입니다. 지금까지 주셔서 감사합니다! –

답변

2

@ 제이슨 Anello, www.teamtreehouse.com에서의 개조가 제안에 의해이 문제를 해결 올빼미 회전 목마 2에서 올드이지만 안정적인 올빼미 회전 목마 1로 전환하십시오! 나는 css와 js 파일을 버전 2에서 버전 1로 바꾸었다. 그리고 이제는 캐 러셀이로드해야한다. Jason에게 감사드립니다 !!

감사합니다. Christina도 도와 줘서 고마워요!

+0

다른 종류의 해결책을 찾았습니까? 필자의 경우 버전 1로 전환 할 수 없습니다. – zekia