FlexSlider: Центральное текущее изображение

Question

Я переключился с использования слайдера bjqs (его отзывчивость была подпара), используя популярный FlexSlider. Я изменил ползунок bjqs, чтобы отобразить «текущее» изображение с центром на экране, причем предыдущие и следующие изображения отображались (частично) до и после текущего изображения. Вы можете увидеть мою реализацию, используя слайдер bjqs here, чтобы получить представление о том, что мне нужно.

Теперь с помощью FlexSlider я не могу найти способ сделать это. Изображения размещаются слева, поэтому «текущее» изображение позиционируется в левой части контейнера. Кто-нибудь знает, как это сделать?

Прямо сейчас я только с помощью стилей и разметки по умолчанию для FlexSlider со следующим JavaScript:

$('.flexslider').flexslider({ 
    animation: "slide", 
    itemWidth: 850, 
    }); 

Answer 1

Я просто была эта же проблема, и ответ лежит в CSS.

Мой формат HTML, как это:

<div id="slider" class="flexslider"> 
<ul class="slides" > 
<li><img src='images/slideshows/image04.jpg' /></li> 
<li><img src='images/slideshows/image06.jpg' /></li> 
<li><img src='images/slideshows/image07.jpg' /></li> 

</ul> 
</div> 

И я должен был изменить CSS для IMG и Ли, чтобы заставить его работать с этим:

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} 
.flexslider .slides img {width: 100%; display: block;} 

к этому:

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; background-color: #ffffff; text-align: center;} 
.flexslider .slides img {width: auto; display: inline;} 

Для меня мне пришлось добавить цвет фона, потому что часть другого слайда показывалась слева, а белый ju st соответствует макету моей страницы.

Надеюсь, что это поможет.

Answer 2

В файле flexslider.css в разделе:

/* FlexSlider Necessary Styles*/ 

изменение:

.flexslider .slides img {width: auto; display: block;} 

к этому:

.flexslider .slides img {width: auto; display: block; margin-left: auto; margin-right: auto;}