2014-07-17 3 views
0

부트 스트랩 프리랜서 테마 (http://startbootstrap.com/templates/freelancer/)를 사용 중이며 Own Carousel.js (http://www.owlcarousel.owlgraphic.com/demos/basic.html)를 사용하고 싶습니다.올빼미 Carousel.js 및 부트 스트랩 테마

이미지를 클릭하고 모달 창에서 열어서 이미지간에 왼쪽/오른쪽으로 스크롤 할 수 있습니다.

처음에는 이미지가 작아서 작게 보입니다. 창 크기를 조정할 때까지 - 괜찮습니다! 모달 윈도우의 초기 로딩 중일 것으로 보이지만 F12 키 (dev 도구)를 누르는 것과 같이 창 크기를 변경하면 이미지의 크기가 조정되어 잘 보입니다. 어떤 제안? 이 CSS 또는 js 문제가 될 가능성이 있습니까?

내 HTML

<!-- Portfolio Modals --> 
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-content"> 
     <div class="close-modal" data-dismiss="modal"> 
      <div class="lr"> 
       <div class="rl"> 
       </div> 
      </div> 
     </div> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-8 col-lg-offset-2"> 


        <div class="modal-body"> 
         <h2>Project Title</h2> 
         <hr class="star-primary"> 

         <div class="owl-carousel"> 
         <div><img src="img/portfolio/cabin.png"> </div> 
         <div><img src="img/portfolio/cake.png"> </div> 
         <div><img src="img/portfolio/circus.png"> </div> 
         </div>    

         <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

다른 JS가 가능한 파일과 충돌이 있습니까?

</head> 태그 앞에 다음 js 파일이 포함되어 있습니다. 올바른 순서입니까?

<script src="js/jquery-1.10.2.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/owl.carousel.min.js"></script> 

순서대로 CSS 파일.

owl.carousel.css 
owl.theme.default.css 
bootstrap.min.css 

도움이나 제안을 해주셔서 감사합니다.

+1

그 회전 목마는 매끄 럽다. 부수적으로, CSS를 포함하는 것이 유익 할 것입니다. – Aibrean

+0

감사합니다 Aibrean - 이제 CSS로 업데이트되고 진행됩니다! 그래요, 매우 매끄러운 데요 - 내 포트폴리오 웹 사이트에서 효과를 발휘하는 데는 최고 일 것입니다! –

답변

3

글쎄, 다른 사람들에게 도움이 되었기를 바랍니다. 이벤트에 문제가있는 것 같습니다. show.bs.modal 대신에 부트 스트랩 문서에 따라 shown.bs.modal이어야합니다.

또한 개발자 웹 사이트에서 사용할 수있는 자동 새로 고침 플러그인을 포함해야합니다.

관련 문제