flexslider con immagine corrente centrato

Question

Sto cercando di costruire un carosello Flexslider - che ha più immagini, ma l'immagine corrente è centrata, con le immagini/prev accanto a entrambi i lati andare fuori dallo schermo - piace questo sito http://www.ncad.ie/

finora ho ottenuto con una sola immagine: http://jsfiddle.net/Y3kx5/

lookign attorno ad altre questioni questo uno pretende di risolverlo ma non riesco a farlo funzionare: FlexSlider: Center current image

hanno cercato altri flexslider JS quali:

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

ma che 3 immagini sullo schermo - mentre io voglio solo quello attuale di essere pienamente sullo schermo con il successivo/precedente visualizzando solo tanto quanto la finestra consente.

Grazie in anticipo .ben.

Answer 1

È possibile aggiungere alcune regole CSS per modificare l'aspetto del cursore e spostare i navigatori al di fuori dei limiti dell'immagine del cursore.

Codice:

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

Answer 2

In realtà hanno appena risolto :-)

Ecco il pezzo finale: http://jsfiddle.net/Y3kx5/2/

Fatto con il 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}