jQuery
  1. jQuery
  3. FlexSlider: centro dell’immagine corrente
Intereting Posts
parametro jlery mobile url che non si aggiorna nel browser, ma ne ottieni uno corretto con “data-url” setTimeout e questa associazione Come cambiare iframe src da un’altra pagina se il valore è compreso tra due numeri JQuery targeting di singoli elenchi per Equalheights su una pagina con più elenchi controlla se un elemento è visualizzato: nessuno o blocco al clic. jquery .keyup event alternative Qual è il modo migliore per creare un menu a comparsa (selezione a discesa HTML)? Inserisci elemento tra antenato e più discendenti usando jQuery Fai in modo che il tracker Jcrop non ruoti quando si ritaglia un’immagine ruotata ricarica la pagina usando ajax per creare una live chat Orientamento del dispositivo di blocco del paesaggio Nascondi div se sono vuoti Aggiunta di oggetti al file JSON con JQuery jquery ajax progress deferred

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;}