bxSlider - 슬라이더 내에서 컨트롤 이동

Question

bxSlider (http://bxslider.com/)로 작업하려고합니다.

컨트롤 (controls:false)을 사용하지 않도록 설정하면 컨트롤이 있던 곳의 왼쪽 및 오른쪽 여백 또는 패딩이 그대로 유지됩니다. 그 말은 내가 소중한 공간을 많이 잃었다는 것을 의미한다.

는 첫 번째 이미지는 내가 컨트롤을 비활성화 한 후에 무엇을 얻을 참조하고, 두 번째는 그것이 있어야했다 폭이다. 공간을 낭비 할뿐만 아니라 다음 슬라이드를 클릭 할 때 적합하지 않은 이전 슬라이드의 일부가 표시됩니다.

나는 <ul> 태그에와 <li> 태그의 폭을 강제로 시도했다 그러나 그것은 도움이되지 않았다 : 방화범을 볼 때

<ul id="slider1" width="660"> 
    <li width="660"> 
    <div class="home-slider"> 

        <div class="slide"> 
         <div class="description"> 
          <h3>La cuisine au style industriel</h3> 
          <div class="author dark">Marie Clairet Maison</div> 

          <p class="gray"> 
           J'aime beaucoup le concept de self service pour la cuisine. 
           J'ai vraiment l'impression d'être devant un e comptoir de self à la cantine. 
           Le problème, c'est qu'il faut vraiment avoir de la place pour s'offrir ce genre d'installation. 
          </p> 
         </div> 
         <img src="images/home-slider-placeholder.png" /> 
        </div> 

       </div>  
    </li> 
    <li>Slide two content</li> 
    <li>Slide three content</li> 
    <li>And so on...</li> 
</ul> 

, 나는 플러그인의 폭을 추가하는 것을 볼 수 626 도처에. 참고로

, 나는 그것을 다음과 같이 가정 구축을 위해 노력하고있어 궁극적 인 것 :

뭔가는 그 번호를 생성하고,이를 기록하지 않았다 슬라이드 안의 컨트롤을 어떻게 넣어야하는지보십시오 ...

Answer 1

나는 내 자신의 질문에 대답하고 있습니다. <ul> 및 <li>을 사용하면이 플러그인에서 <div>을 사용할 때와 동일한 문제가 발생하지 않는 것으로 보입니다.

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#slider1').bxSlider({ 
     wrapperClass: 'bx-wrapper home-slider' 
    }); 
    }); 
</script> 
<div id="slider1"> 

        <div class="slide"> 
         <div class="description"> 
          <h3>La cuisine au style industriel</h3> 
          <div class="author dark">Marie Clairet Maison</div> 

          <p class="gray"> 
           J'aime beaucoup le concept de self service pour la cuisine. 
           J'ai vraiment l'impression d'être devant un e comptoir de self à la cantine. 
           Le problème, c'est qu'il faut vraiment avoir de la place pour s'offrir ce genre d'installation. 
          </p> 
         </div> 
         <img src="images/home-slider-placeholder.png" /> 
        </div> 

    <div>Slide two content</div> 
    <div>Slide three content</div> 
    <div>And so on...</div> 
</div> 

지금까지 슬라이더에서 화살표 컨트롤을 이동 한, bx_styles.css을 편집하고 BX-옆는 BX-이전의 위치를 ​​변경합니다

내 마지막 코드처럼 보였다.