ट्विटर पर केन बर्न्स बूटस्ट्रैप कैरोसेल

Question

मैं ट्विटर बूटस्ट्रैप कैरोसेल पर Ken Burns Effect कैसे लागू कर सकता हूं?

.carousel .item img { 
-webkit-transition: all 12s; 
-moz-transition: all 12s; 
-o-transition: all 12s; 
transition: all 12s; 
} 

... संक्रमण लागू नहीं होता है।

jsFiddle साथ कार्य करते हुए देखें ...

Answer 1

... संक्रमण लागू करने के लिए नहीं लगता है।

ओह, लेकिन यह करता है! आप केवल अपने बेला की सीएसएस कोड से दो लिखने की त्रुटियों को दूर करने के लिए है:

• किसी भी चयनकर्ता कोष्ठक
• एक टिप्पणी // के साथ शुरू करने के बजाय यहां /*...*/

उपयोग करने का एक display: inline-block; बाहर है आपके corrected fiddle जो काफी अच्छी तरह से काम करता है।

केवल एक ही समस्या बचा जाता है:
केन बर्न्स प्रभाव केवल दूसरी स्लाइड पर शुरू होता है। यह इस तथ्य के कारण है कि पहली स्लाइड "सक्रिय" कक्षा के साथ तुरंत शुरू होती है और इसमें संक्रमण नहीं होती है। तो यह पैमाने के साथ शुरू होता है: 1.5 (जो संक्रमण का अंतिम मूल्य होना चाहिए)।

एक समाधान संक्रमण के बजाय सीएसएस कीफ्रेम एनिमेशन का उपयोग करने के लिए किया जा सकता है। लेकिन इस मामले में जेएस का थोड़ा उपयोग करना बहुत आसान है। बूटस्ट्रैप कैरोसेल किसी भी तरह से जेएस का उपयोग वस्तुओं से कक्षाओं को जोड़ने/अलग करके स्लाइड से स्लाइड में बदलने के लिए करता है।

यहाँ है एक समाधान (वह भी थोड़ा साफ किया जाता है), एक अतिरिक्त वर्ग "inactiveUntilOnLoad" लोड करते समय के दौरान "सक्रिय" वर्ग neutralizes और कहा कि डोम तैयार घटना में निकाल दिया जाता है का उपयोग करता है, तो संक्रमण सही पहली स्लाइड से पूरा होगा:
jsFiddle working from first slide

---

मुनाफा:

यहाँ सब परिवर्तन करने के लिए "केन बर्न्स" एक कुंवारी बूटस्ट्रैप 3 हिंडोला की जरूरत हैं:

सीएसएस में परिवर्तन
.carousel .item img के लिए संक्रमण को परिभाषित करें,
.carousel .item img के लिए शुरू स्थिति को परिभाषित,
.carousel .item.active img के लिए अंत स्थिति को परिभाषित,
पहले फ्रेम की एनीमेशन बनाने के लिए प्रारंभ स्थिति की परिभाषा के लिए चयनकर्ता .carousel .item.active.inactiveUntilOnLoad img भी जोड़ें।

/* transition */ 
.carousel .item img { 
    -webkit-transition: all 5s; 
    -moz-transition: all 5s; 
    -o-transition: all 5s; 
    transition: all 5s; 
} 
/* start status */ 
.carousel .item img, 
.carousel .item.active.inactiveUntilOnLoad img { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -o-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
} 
/* end status */ 
.carousel .item.active img { 
    -webkit-transform: scale(1.5); 
    -moz-transform: scale(1.5); 
    -o-transform: scale(1.5); 
    -ms-transform: scale(1.5); 
    transform: scale(1.5); 
} 

एचटीएमएल में परिवर्तन
जोड़ें वर्ग ।पहले (सक्रिय) आइटम में inactiveUntilOnLoad।

<div class="item active inactiveUntilOnLoad"> 

जे एस बदलता है
दूर करने के लिए वर्ग .inactiveUntilOnLoad डोम तैयार घटना के लिए कोड जोड़ें।

$(function() { 
    $('.inactiveUntilOnLoad').removeClass('inactiveUntilOnLoad'); 
}); 

Answer 2

अपडेटेड जेएसफ़िल्ड here है। बस पहली स्लाइड के लिए छवि स्रोत को अपडेट करना क्योंकि इसे मूल स्रोत से हटा दिया गया था।

<img src="http://3.bp.blogspot.com/-aIa3upFFC0M/UU2QTk3SJ6I/AAAAAAAAJo4/vcVayWzOjmc/s1600/sky+cloud+wallpapers+hd+(10).jpg" data-src="http://3.bp.blogspot.com/-aIa3upFFC0M/UU2QTk3SJ6I/AAAAAAAAJo4/vcVayWzOjmc/s1600/sky+cloud+wallpapers+hd+(10).jpg" alt="First slide" /> 

Answer 3

इसके अलावा इसके लिए jQuery प्लगइन है: https://github.com/filippovjegor/bootstrap-kenbruns-carousel