Riposizionamento di UNA immagine nel plug-in Nivo Slider

Question

Sono abbastanza nuovo nello sviluppo web e in jQuery, quindi per favore portami con me.

Sto utilizzando Nivo Slider su un sito Web su cui sto lavorando. È un sito web reattivo e voglio che il dispositivo di scorrimento sia facilmente visibile su tutte le dimensioni dello schermo. Ho impostato un punto di interruzione nel mio CSS in modo che quando il sito raggiunge la sua dimensione più piccola (attorno alle dimensioni di uno schermo mobile) il cursore sia impostato su 200% di larghezza, con l'overflow nascosto, in modo che le immagini siano più grandi.

Questo funziona bene, tuttavia in queste dimensioni è possibile vedere solo il centro del cursore, mentre i lati vengono ritagliati dal bordo dello schermo. Per la maggior parte delle immagini che sto usando questo non è un problema, tuttavia uno di questi è ritagliato in modo molto imbarazzante. È facile riposizionare l'intero cursore, ma voglio provare a spostare questa immagine ONE in modo che possa essere vista meglio su schermi piccoli.

Il CSS Ho aggiunto al nivo-slider.css predefinito è:

@media screen and (max-width: 31.25em) { /* 500px ÷ 16px */ 

.slider-wrapper{ 
    overflow: hidden; 
} 

.nivoSlider { 
    left: -50%; 
    width:200%; 
} 

.nivo-caption { 
    margin-left: 25%; 
    width: 50%; 
} 

} 

Grazie mille!

Answer 1

Basta usare i CSS, è possibile aggiungere un tipo di classe one-off a quella particolare immagine, e buttare nella vostra interrogazione @media:

.my-one-off { left:??px; margin-right:??px }

è possibile cercare l'immagine con jQuery così (se non sbaglio, Nivo usa la libreria jQ).

$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example

O

$('img[src*="one-off.jpg"]').addClass('my-one-off');

Answer 2

Ho guardato nivo-slider3.1. Per selezionare una particolare immagine unica e spostarlo a sinistra è possibile utilizzare il seguente in css:

img[src="YourSpecialPic.jpg"]{ 
    left:50px !important; 
} 

È anche possibile impostare un'animazione personalizzata per una diapositiva particolare con il seguente attributo img all'interno del codice HTML:

data-transition="slideInLeft" 

È possibile subsare qualsiasi attributo per ottenere l'effetto desiderato, ma penso che questo farà il trucco.

NOTA:

A seconda di quali effetti si sta utilizzando dovrà stabilire se che scombina l'animazione o meno (ad esempio, l'animazione per affettare viene avvitato dopo aver eseguito lo spostamento a sinistra L'animazione slideInLeft sembra funzionare bene..) .

Non ho una soluzione rapida o semplice per il fissaggio di tutti gli effetti di animazione per quella particolare diapositiva, ma sono sicuro che una dichiarazione condizionale all'interno del javascript potrebbe raggiungerlo (non sono abbastanza intelligente per farlo).