निवो स्लाइडर प्लगइन में एक छवि को पुनर्स्थापित करना

Question

मैं वेब विकास और jQuery के लिए काफी नया हूं, इसलिए कृपया मेरे साथ भालू।

मैं एक वेबसाइट पर निवो स्लाइडर का उपयोग कर रहा हूं जिस पर मैं काम कर रहा हूं। यह एक उत्तरदायी वेबसाइट है, और मैं चाहता हूं कि स्लाइडर सभी स्क्रीन आकारों पर आसानी से दिखाई दे। मैंने अपने सीएसएस में ब्रेकपॉइंट सेट किया है ताकि जब साइट अपने छोटे आकार (मोबाइल स्क्रीन के आकार के आसपास) हो जाए तो स्लाइडर 200% चौड़ाई पर सेट हो जाता है, ओवरफ्लो छुपा हुआ है, ताकि छवियां बड़ी हों।

यह ठीक काम करता है, हालांकि इस आकार में आप केवल स्लाइडर का केंद्र देख सकते हैं, जबकि किनारे स्क्रीन के किनारे से फसल हो जाते हैं। अधिकांश छवियों के लिए मैं इसका उपयोग कर रहा हूं, यह कोई समस्या नहीं है, हालांकि उनमें से एक बहुत अजीब तरह से उगाया जाता है। पूरे स्लाइडर को दोबारा बदलना आसान है, लेकिन मैं इस छवि को आज़माकर ले जाना चाहता हूं ताकि इसे छोटी स्क्रीन पर बेहतर देखा जा सके।

सीएसएस मैं डिफ़ॉल्ट nivo-slider.css को जोड़ दिया है:

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

} 

धन्यवाद बहुत बहुत!

Answer 1

बस सीएसएस का उपयोग कर, आप एक बंद प्रकार वर्ग कि विशेष रूप से छवि के लिए जोड़ सकते हैं, और फेंक है कि आपके @media क्वेरी में:

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

साथ ही आप jQuery के साथ उस छवि के लिए खोज सकते हैं (अगर मुझे गलत नहीं लगता है, तो निवो जेक्यू लाइब्रेरी का उपयोग करता है)।

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

या

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

Answer 2

मैं nivo-slider3.1 को देखा।

:

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

तुम भी HTML के भीतर निम्नलिखित img विशेषता के साथ एक विशेष स्लाइड के लिए एक कस्टम एनीमेशन सेट कर सकते हैं: आदेश केवल एक विशेष छवि का चयन करें और स्थानांतरित करने के लिए में यह आप सीएसएस में निम्नलिखित इस्तेमाल कर सकते हैं छोड़ दिया

data-transition="slideInLeft" 

आप वांछित प्रभाव प्राप्त करने के लिए किसी भी विशेषताओं को उप-कर सकते हैं, लेकिन मुझे लगता है कि यह चाल करेगा।

नोट:

क्या प्रभाव आप चाहे या नहीं है कि एनीमेशन को खराब करता निर्धारण करेगा उपयोग कर रहे हैं पर निर्भर करता है (उदाहरण के लिए टुकड़ा करने की क्रिया एनीमेशन बाईं चाल प्रदर्शन के बाद खराब कर दिया हो जाता है slideInLeft एनीमेशन ठीक से काम करने लगता है।।) ।

मेरे पास उस विशेष स्लाइड के लिए सभी एनीमेशन प्रभावों को ठीक करने के लिए त्वरित या आसान समाधान नहीं है, लेकिन मुझे यकीन है कि जावास्क्रिप्ट के भीतर एक सशर्त कथन इसे प्राप्त कर सकता है (मैं इसके लिए पर्याप्त स्मार्ट नहीं हूं)।