bxSlider - перемещать элементы управления внутри слайдера

Я пытаюсь работать с 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>

Глядя на Firebug, я вижу, что плагин везде добавляет ширину 626. Я этого не писал, что-то генерирует этот номер:

введите здесь описание изображения

Для справки, конечная вещь, которую я пытаюсь построить, должна выглядеть так:

введите здесь описание изображения

Посмотрите, как мне нужно поместить элементы управления ВНУТРИ слайда...


javascript jquery css slideshow bxslider
person Nathan H    schedule 13.08.2012    source источник
comment
Вы захотите использовать position:absolute или position:relative в зависимости от того, как вы разложили все остальное. Однако я не могу дать конкретный ответ, потому что вы не предоставили свой код.   -  person Valjas    schedule 13.08.2012
comment
обновлен с некоторым кодом, если это помогает. Но на самом деле я еще многого не трогал. Я пока использую все значения по умолчанию.   -  person Nathan H    schedule 13.08.2012
comment
также обновлены заметки Firebug   -  person Nathan H    schedule 13.08.2012
comment
Я думаю, что нашел свой собственный ответ. Использование div вместо li   -  person Nathan H    schedule 13.08.2012

Ответы (1)


arrow_upward
4
arrow_downward

Я отвечаю на свой вопрос. Кажется, что использование <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-next и bx-prev.

person Nathan H    schedule 13.08.2012