AngularJS पर छवियों और सामग्री का सरल स्लाइडर

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

गिटहब प्रोजेक्ट डेमो

स्लाइड परिवर्तन

आरंभ करने के लिए, आइए सभी स्लाइड्स को प्रदर्शित करें, AngularJS पर यह केवल ng-repeat निर्देश का उपयोग करके किया जाता है:

 //      $scope.slides = [ { 'image': 'images/image1.png' }, { 'image': 'images/image2.png' } ]; 

HTML टेम्पलेट में:

 <div ng-repeat="(i, slide) in slides"> <img ng-src="{{ slide.image }}" /> </div> 

नतीजतन, हमारे पास एक कोड है जो सभी स्लाइड्स (इस उदाहरण में, चित्र) प्रदर्शित करता है। अब हमें उन्हें कुछ अंतराल पर क्रमिक रूप से बदलने के लिए मजबूर करने की आवश्यकता है, लेकिन एंगुलरजेएस में setInterval फ़ंक्शन का एक एनालॉग नहीं है, इसलिए, सदा टाइमर को लागू करने के लिए, हम चक्रीय रूप से $timeout कहेंगे। ऐसे टाइमर को रोकने के लिए, आपको $timeout.cancel फ़ंक्शन का उपयोग करने की आवश्यकता है।

 //    $scope.next = function() { var total = $scope.slides.length; if (total > 0) { $scope.$slideIndex = ($scope.$slideIndex == total - 1) ? 0 : $scope.$slideIndex + 1; } }; //  play  ,         $scope.play = function() { timeOut = $timeout(function() { $scope.next(); $scope.play(); }, 2000); }; 

अब टेम्पलेट में एक कोड जोड़ें जो केवल वर्तमान स्लाइड प्रदर्शित करेगा:

 <div ng-repeat="(i, slide) in slides" ng-show="i == $slideIndex"> <img ng-src="{{ slide.image }}" /> </div> 

यदि हम इस कोड को निष्पादित करते हैं, तो हमारे पास एक स्लाइडर होगा जो हर 2 सेकंड में छवि को बदलता है, लेकिन बिना किसी प्रभाव के।

स्लाइड संक्रमण प्रभाव

AngularJS एक अलग ngAnimate मॉड्यूल में तत्वों को एनिमेट करने के लिए जिम्मेदार है। यह इस मॉड्यूल को जोड़ने के लिए पर्याप्त है और सीएसएस स्लाइड में संक्रमण प्रभावों का वर्णन धीरे-धीरे एक दूसरे को बदलने के लिए शुरू हो जाएगा। एक अभिव्यक्ति प्रभाव का एक उदाहरण:

 .animation-fade.ng-hide-add, .animation-fade.ng-hide-remove { /*        */ -webkit-transition: 1s linear all; -moz-transition: 1s linear all; -o-transition: 1s linear all; transition: 1s linear all; display: block !important; } .animation-fade.ng-hide-add, .animation-fade.ng-hide-remove.ng-hide-remove-active { /*           */ opacity: 1; } .animation-fade.ng-hide-add.ng-hide-add-active, .animation-fade.ng-hide-remove { /*           */ opacity: 0; position: absolute; } छिपाने-एड-सक्रिय, .animation-fade.ng-hide-add, .animation-fade.ng-hide-remove { /*        */ -webkit-transition: 1s linear all; -moz-transition: 1s linear all; -o-transition: 1s linear all; transition: 1s linear all; display: block !important; } .animation-fade.ng-hide-add, .animation-fade.ng-hide-remove.ng-hide-remove-active { /*           */ opacity: 1; } .animation-fade.ng-hide-add.ng-hide-add-active, .animation-fade.ng-hide-remove { /*           */ opacity: 0; position: absolute; } 

अब, उन सभी स्लाइडों के लिए जिनमें animation-fade वर्ग है, एक संक्रमण प्रभाव / फीका प्रभाव लागू किया जाएगा।
भोले-भाले मॉड्यूल आपको केवल सीएसएस के माध्यम से ही नहीं, बल्कि जावास्क्रिप्ट के माध्यम से भी प्रभावों का वर्णन करने की अनुमति देता है, जो आपको अधिक जटिल एनीमेशन को लागू करने और इसके एनालॉग्स के करीब लाने के लिए अनुमति देता है, उदाहरण के लिए, nivoSlider।

निष्कर्ष

इस लेख में, मैंने केवल मूल सिद्धांतों की जांच की जो इस मॉड्यूल का आधार थे। इस समय मॉड्यूल में ऑटोप्ले कार्यक्षमता, स्लाइड के बीच देरी में बदलाव, स्लाइड के लिए मैनुअल स्क्रॉल तत्वों को जोड़ने की क्षमता और प्रत्येक स्लाइड के लिए अलग से एनिमेशन सेट करने की क्षमता भी है। मुझे उम्मीद है कि मॉड्यूल किसी के लिए उपयोगी होगा और मैं इसके विकास में किसी भी मदद के लिए आभारी रहूंगा।