FlexSlider: centro dell’immagine corrente

Sono passato dall’uso del cursore bjqs (la sua reattività era scadente) all’utilizzo del popolare FlexSlider . Avevo modificato il cursore bjqs per visualizzare l’immagine “corrente” centrata sullo schermo, con le immagini precedenti e successive visualizzate (parzialmente) prima e dopo l’immagine corrente. Puoi vedere la mia implementazione usando il cursore bjqs qui per avere un’idea per quello che sto cercando.

Ora con FlexSlider, non riesco a capire un modo per farlo. Le immagini vengono lasciate a sinistra, quindi l’immagine “corrente” viene posizionata sul lato sinistro del contenitore. Qualcuno conosce un modo per realizzare questo?

In questo momento sto solo usando gli stili e il markup predefiniti per FlexSlider, con il seguente javascript:

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

Ho appena avuto lo stesso problema e la risposta sta nel CSS.

Il mio formato HTML è come questo:

 

E ho dovuto cambiare il CSS per img e li per farlo funzionare da questo:

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

a questo:

 .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; background-color: #ffffff; text-align: center;} .flexslider .slides img {width: auto; display: inline;} 

Per quanto mi riguarda, ho dovuto aggiungere il colore dello sfondo perché parte di un’altra diapositiva era visibile a sinistra e il bianco corrispondeva esattamente al mio layout di pagina.

Spero che sia d’aiuto.

Nel file flexslider.css sotto la sezione:

 /* FlexSlider Necessary Styles*/ 

modificare:

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

a questo:

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