FlexSlider: Center current image

Question

I switched from using the bjqs slider (it's responsiveness was subpar) to using the popular FlexSlider. I had modified the bjqs slider to display the "current" image centered on the screen, with the previous and next images displayed (partially) before and after the current image. You can see my implementation using the bjqs slider here to get an idea for what I'm after.

Now with the FlexSlider, I can't quite figure out a way to do this. The images are floated left, so the "current" image gets positioned to the left side of the container. Anybody know a way to accomplish this?

Right now I'm just using the default styles and markup for FlexSlider, with the following javascript:

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

Handel

I just tried the accepted answer on a fresh install of Flexslider, and this does not center the current image. I'm trying to accomplish something like the example you showed, with no luck. Is there anything else that you did, or do you have a live example? – Corwun

Answer 1

I just had this same trouble and the answer lies in the CSS.

My HTML format is like this :

<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 the img and the li to make it work from this:

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

to this:

.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 the background color because part of another slide was showing up on the left, and the white just matches my page layout.

Hope that helps.

Tropous

Answer 2

In the flexslider.css file under the section:

/* FlexSlider Necessary Styles*/ 

change:

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

to this:

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

Alper

Answer 3

To set Image Horizontally center in Flexslider, just make changes in flexslider.css file as below.

Find .flexslider .slides img and make changes as below.

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

Sigmatism