css3 - How to change customized carousel indicator background color? -

मैं सक्रिय है जब img-circle पृष्ठभूमि का रंग बदलना चाहते हैं।

< प्री> & lt; div id = "myCarousel" वर्ग = "हिंडोला स्लाइड" & gt; & Lt; div वर्ग = "हिंडोला-बटन" & gt; & Lt; div class = "col-sm-4 text-center" & gt; & Lt; एक कक्षा = "टेक्स्ट-केंद्र" डेटा-लक्ष्य = "# myCarousel" डेटा-स्लाइड-टू = "0" href = "#" & gt; & Lt; div वर्ग = "आईएमजी-सर्कल सेंटर-ब्लॉक" & gt; & Lt; img class = "हिंडोला-आइकॉन-आईएमजी" src = "छवि / आइकन-1-छात्र.svg" & gt; & Lt; / div & gt; & Lt; / a & gt; & Lt; / div & gt;

ऐसा करने का सबसे आसान तरीका बिना जावास्क्रिप्ट है मानक वर्गों का उपयोग करने के लिए अपने मार्कअप को संशोधित करने के लिए इसके बाद आप केवल सक्रिय वर्ग का उपयोग कर सकते हैं जो तत्व के तात्कालिक बच्चे तत्वों को स्वतः । कारल-संकेतक वर्ग के साथ जोड़ लेता है।

में डेमो, मैं मानक बूटस्ट्रैप सीएसएस को ओवरराइड करता हूं और सक्रिय क्लास का लाभ लेता हूं जो कि कुछ कस्टम सीएसएस के माध्यम से bootstrap.js द्वारा कैरोल-संकेतक बाल तत्वों को जोड़ दिया जाता है:

 । कैरोल- संकेतक ली {प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 48px; ऊंचाई: 48px; मार्जिन: 10 पीएक्स; टेक्स्ट इंडेंट: 0; कर्सर: सूचक; सीमा: कोई नहीं; सीमा-त्रिज्या: 50%; पृष्ठभूमि रंग: # 0000ff; बॉक्स-छाया: इनसेट 1px 1px 1px 1px rgba (0,0,0,0,5.5); }। कैरोल-संकेतक। एक्टिव {चौड़ाई: 48px; ऊंचाई: 48px; मार्जिन: 10 पीएक्स; पृष्ठभूमि रंग: # एफएफएफ 99; }  

यदि आप अपनी सामग्री को मानक कक्षाओं में दोबारा बना सकते हैं, तो आप हमेशा सीएसएस को अधिलेखित कर सकते हैं या इसे कम से अनुकूलित कर सकते हैं। आपने अपनी कस्टम सीएसएस पोस्ट नहीं किया है या संकेत नहीं दिया है कि क्या आप बूटस्ट्रैप 2 या 3 के संस्करण का उपयोग कर रहे हैं, तो मैं अधिक उदाहरण के उदाहरण प्रदान नहीं कर सका। डेमो में मार्कअप संस्करण 3.2.0 का उपयोग कर रहा है।

आप हिसाब घटनाओं के माध्यम से यह जावास्क्रिप्ट के साथ भी कर सकते हैं दोबारा, यह उदाहरण बूटस्ट्रैप 3.2.0 पर आधारित है। यह संस्करण 2 के साथ काम नहीं करेगा, क्योंकि ईवेंट नाम परिवर्तित हो जाते हैं।

इस उदाहरण में, आप slid.bs.carousel घटना के लिए सुनते हैं। जैसे ही हिंडोला स्लाइड के करीब है, इसलिए यह अगली सक्रिय स्लाइड प्राप्त करने के लिए, आपको ईवेंट का उपयोग करना होगा। संबंधित लक्ष्य उसके बाद इसी सूचक को खोजने के लिए, आप हिंडोला सूचक को डेटा-स्लाइड-टू विशेषता में मिलान मूल्य के साथ प्राप्त करने के लिए अगले सक्रिय स्लाइड के सूचकांक का उपयोग कर सकते हैं।

<पूर्व> // आईडी को अपने हिंडोला आईडी $ ('# हिंडोला-उदाहरण-जेनेरिक') में बदलना सुनिश्चित करें। ('Slid.bs.carousel', फ़ंक्शन (ईवेंट) {var Nextactiveslide = $ (event.relatedTarget)। इंडैक्स (); var $ btns = $ ('। हिंडोला-बटन'); var $ सक्रिय = $ btns.find ("[डेटा-स्लाइड-टू-''" + अगलेक्टिवस्लाइड + " '] "); $ Btns.find ('। Img-circle ')। RemoveClass (' सक्रिय '); $ सक्रिय.फंड ('। Img-circle ')। AddClass (' सक्रिय ');});