FlexSlider: center current image

Question

I switched from using the bjqs slider (its responsiveness was subparameter) to using the popular FlexSlider . I changed the bjqs slider to display the “current” image centered on the screen, with the previous and next images showing (partially) before and after the current image. You can see my implementation using bjqs slider here to get an idea of ​​what I need.

Now with FlexSlider I can’t figure out how to do this. Images are placed on the left, so the "current" image is positioned on the left side of the container. Does anyone know how to do this?

Right now I just use the default styles and layout for FlexSlider with the following javascript:

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

Answer 1

I just had the same problem and the answer lies in CSS.

My HTML format is as follows:

 <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> 

And I had to change the CSS for img and li to make it work from this:

 .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;} 

For me, I had to add a background color, because part of another slide was shown on the left, and white just corresponds to the page layout.

Hope this helps.

Answer 2

In the flexslider.css file under:

 /* FlexSlider Necessary Styles*/ 

change:

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

:

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