Neupositionierung eines Bildes im Nivo Slider Plugin

Question

Ich bin ziemlich neu in der Web-Entwicklung und jQuery, also bitte tragen Sie mit mir.

Ich benutze Nivo Slider auf einer Website, an der ich arbeite. Es ist eine responsive Website, und ich möchte, dass der Schieberegler auf allen Bildschirmgrößen gut sichtbar ist. Ich habe in meinem CSS einen Haltepunkt gesetzt, sodass der Schieberegler bei der kleinsten Größe (etwa so groß wie ein mobiler Bildschirm) auf 200% Breite eingestellt wird, wobei der Überlauf ausgeblendet wird, sodass die Bilder größer sind.

Dies funktioniert gut, aber in dieser Größe können Sie nur die Mitte des Schiebereglers sehen, während die Seiten vom Rand des Bildschirms abgeschnitten werden. Für die meisten Bilder, die ich benutze, ist das kein Problem, aber einer von ihnen ist sehr unbeholfen zugeschnitten. Es ist einfach, den gesamten Schieberegler neu zu positionieren, aber ich möchte versuchen, dieses Bild zu verschieben, damit es auf kleinen Bildschirmen besser zu sehen ist.

Die CSS-I auf den Standard Nivo-slider.css hinzugefügt haben ist:

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

} 

sehr vielen Dank!

Answer 1

Nur CSS verwenden, können Sie eine einmalige Typklasse zu diesem bestimmten Bild hinzuzufügen, und die Abfrage in Ihre @media werfen:

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

Sie für das Bild mit jQuery suchen könnte auch (Wenn ich mich nicht irre, verwendet Nivo die jQ-Bibliothek).

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

Oder

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

Answer 2

schaute ich auf Nivo-slider3.1. Um ein bestimmtes Bild wählen nur und bewegen Sie sich nach links Sie Folgendes in CSS verwenden:

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

Sie auch eine benutzerdefinierte Animation für eine bestimmte Folie mit dem folgende img Attribute im HTML festlegen:

data-transition="slideInLeft" 

Sie können alle Attribute subtrahieren, um den gewünschten Effekt zu erzielen, aber ich denke, das wird den Trick machen.

HINWEIS:

Je nachdem, welche Effekte Sie bestimmen verwenden, ob oder nicht, dass die Animation vermasselt (zB Die Slicing-Animation wird nach der Durchführung der linken Bewegung vermasselt Die slideInLeft Animation scheint gut zu funktionieren..) .

Ich habe keine schnelle oder einfache Lösung zur Behebung aller Animationseffekte für diese eine bestimmte Folie, aber ich bin mir sicher, dass eine bedingte Aussage innerhalb des Javascript es erreichen könnte (ich bin einfach nicht schlau genug dafür).