flexslider with centered current image

Question

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.

Larios

Answer 1

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}

Larios

Answer 2

You can add some CSS rules to change the aspect of the slider and move the navigators outside of the bounds of the slider image.

Code:

.content {
    background: #f2f2f2;
    max-width: 800px;
    display: block;
    margin: 0 auto
}
.flex-direction-nav .flex-next {
    right: 0 !important;
    margin-right: -30px;
    opacity: 1 !important;
}
.flex-direction-nav .flex-prev {
    left: 0 !important;
    opacity: 1 !important;
    margin-left: -30px;
}
.flexslider {
    width: 90%;
    margin: 0 auto;
}

Demo: http://jsfiddle.net/IrvinDominin/899SD/

Sublittoral

hi - thanks for your answer - but what I'm after is having the next/prev Images (not arrows) next to the current image but only showing as much as there is space on the screen - as in: ncad.ie – Larios

I don't know if it's possibile using this plugin, I'll take a look. Eventually can you move to another plugin? – Sublittoral

Could potentially move to another but Flexslider is the best in terms of swipe / responsive size etc and there's a Drupal module for it. In terms of a solution the author of Flexslider mentions one here which I tried and it kinda works except it creates horizontal scrolling as a result: github.com/woothemes/FlexSlider/issues/212 – Larios