2013-03-27 5 views
2

У меня возникает проблема с Flexslider, добавив дополнительное свободное пространство после финального слайда.Flexslider добавляет дополнительное пространство вправо от финального слайда ...

Я создал div размером 702 пикселя, предназначенный для отображения двух слайдов шириной 342 пикселя за раз, с 18 пикселями между ними. Я установил «itemWidth» в «360px», чтобы дополнительное пространство и «itemMargin» равны «0».

<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
     $('.flexslider').flexslider({ 
     animation: "slide", 
     animationLoop: true, 
     itemWidth: 360, 
     itemMargin: 0 
     }); 
    }); 
</script> 

Это дает мне надлежащее расстояние мне нужно между слайдами, но добавляет дополнительный 18px в конце, что я не могу за жизнь мне избавиться. Еще более раздражающий, он рассматривает его как четвертый сдвиг перехода, когда ему нужно только три.

Вот захват экрана: http://bit.ly/XHJVeU

Обратите внимание на четыре точки в нижней части. Для отображения четырех слайдов потребуется всего три.

Я изменил каждый бит CSS, о котором я могу думать, но все равно не повезло. Даже добавление отступов/полей к изображениям ничего не делает. Разочарование.

В любом случае. Я надеюсь, что кто-то столкнется с этим раньше и что это быстрое решение.

Заранее спасибо.

UPDATE: HTML включен для справки.

<div id="carousel" class="flexslider"> 
<ul class="slides"> 
    <li><img src="images/suite-a_01.png" /></li> 
    <li><img src="images/suite-a_02.png" /></li> 
    <li><img src="images/suite-a_03.png" /></li> 
    <li><img src="images/suite-a_04.png" /></li> 
</ul> 
</div> 

Спасибо.

+0

Какой у вас HTML? – Mooseman

+0

Жесткий, чтобы включить все это, поскольку он ссылается на файл слайдера Flexslider jQuery для различных атрибутов. Добавлен HTML выше. – StephenESC

ответ

2

Осмотрите живое выступление вашего flexslider и проверьте панель разбиения на страницы (это класс с «flex-control-nav» и «flex-control-paging».) У меня была такая же проблема, и я обнаружил, что это имела ширину css, которая простиралась за пределы моего содержимого, таким образом добавляя белое пространство вправо.

Я надеюсь, что это ясно. Дайте мне знать, если я могу уточнить.

+0

Хотел бы я рассказать вам. К сожалению, это было почти месяц назад, поэтому мне пришлось придумать другое решение и отказаться от Flexslider для этой части. Спасибо за ответ, в любом случае! – StephenESC

0

Для тех, кто работает в этот вопрос, несколько лет на ...

Просто убедитесь, что ваши дочерние элементы внутри FlexSlider нет отступов или полей, которые могут вызвать их превысить в ожидаемых ширинах.

Это то, что вызывает дополнительный мнимый слайд, в качестве компенсации.

.slide { 
    margin: 0 !important; 
    padding: 0 !important; 
} 
Смежные вопросы