flexslider with centered current image

jquery flexslider
topiman picture topiman · Aug 20, 2013 · Viewed 8.3k times · Source

am trying to build a Flexslider carousel - which has multiple images but the current image is centered, with the next/prev images to either side going off-screen - like this site http://www.ncad.ie/

So far I've got it with a single image: http://jsfiddle.net/Y3kx5/

Lookign around other issues this one claims to solve it but I can't get it to work: FlexSlider: Center current image

have tried other flexslider JS such as:

$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
itemWidth: 800,
minItems: 3,
maxItems: 3
});

but that 3 images on screen - whereas I want only the current one to be fully onscreen with the next/prev displaying only as much as the window allows.

Thanks in advance .ben.

Answer

topiman picture topiman · Aug 21, 2013

Actually have just solved it :-)

Here's the final piece: http://jsfiddle.net/Y3kx5/2/

Done with the CSS:

.container {overflow: hidden; width: 100%}
.flexslider {max-width: 800px; width: 800px; margin: 0 auto}
.content {background: #f2f2f2; max-width: 800px; display: block; margin: 0 auto}
.flex-viewport {overflow: visible !important}

Related questions

Flexslider - different slideshow speed on each slide

I'm using Flexslider and have been asked to display each slide at a different time depending on how much content it has, so fast for a short sentence and slow for a paragraph. How can I set this up when …

Read More
Control Flexslider from outside element.

I have a Flexislider that I would like to control from outside the element. I tried this: var myslider = $('.slider').flexslider({ animation: 'slide' }); $('button').click(function () { myslider.flexAnimate(3)    //Function: Move slider - (target, pause) parameters }); But that returns TypeError: …

Read More
Flexslider slow image load

I am using Flexslider on a website I'm building. I like the responsiveness very much and thats the reason I don't wan't to change to nivo-slider or something similar. The negative about it is that it doesn't display the first …

Read More