ایک لچکدار کارسیل اجزاء بنائیں

vue.js حال ہی میں چھتوں اور حدوں پر آ چکا ہے، اب تک چھٹے سب سے زیادہ فورک منصوبے بننے کے لئے Github. لکھنے کے وقت، فیس بک کے اپنے Reactjs سے بھی آگے. یہ کہنا محفوظ ہے کہ یہ تیزی سے ایک اہم مرکز بن رہا ہے ویب سازی ، اور قابل اعتماد جانا جاوا اسکرپٹ فریم ورک منصوبوں میں استعمال کے لئے.

اس سبق میں، ہم ایک سادہ carousel جزو بنانے کے لئے vue.js استعمال کرنے جا رہے ہیں. یہ جزو مختلف خصوصیات کو قبول کرے گا، آپ کو کچھ بنیادی ترتیبات جیسے منتقلی کی رفتار، منتقلی کی قسم، اور کیا کاروسیل خود بخود سلائڈز کو منتقل کرنا چاہئے.

اگر یہ سب بہت مشکل ہو تو، اے ویب سائٹ بلڈر آلے آپ کی بات زیادہ ہوسکتی ہے. زیادہ پیچیدہ سائٹ بنانے کے لئے مبارک ہو؟ آپ کو ضرورت ہے ویب میزبانی یہ نمٹنے کے لئے کر سکتے ہیں.

• vue.js کے ساتھ کارکردگی کی رفتار تیز

شروع کرنے کے لئے، یہاں پروجیکٹ فائلوں کو ڈاؤن لوڈ کریں (اور ان کو بچاؤ کلاؤڈ اسٹوریج ) اور اپنے پسندیدہ ٹیکسٹ ایڈیٹر میں 'ویب سائٹ ٹیمپلیٹ' ڈائرکٹری کو کھولیں. دریں اثنا ٹرمینل میں، سی ڈی 'ویب سائٹ ٹیمپلیٹ' میں اور پھر منصوبوں NODE.JS انحصار انسٹال کرنے کے لئے 'این پی ایم انسٹال' چلائیں. آخر میں، ایک ترقیاتی سرور شروع کرنے کے لئے 'این پی ایم رن ڈیو' چلائیں تاکہ آپ براؤزر میں اپنے منصوبے کو دیکھ سکیں. عام طور پر یہ 'مقامی ہسٹسٹ: 8080' میں ہوگا.

01. carousel سلائڈ فائلوں کو بنائیں

'ایس آر سی / اجزاء' میں، 'اے پی پی کارسیل سلائیڈ' اور اس میں دو فائلوں میں ایک نئی ڈائرکٹری بنائیں: 'اے پی پی کارسیل سلائڈ .ویو' اور 'اجزاء .پ - کارسیل سلائڈ. ایس ایس ایس'. ان میں دو نئے vue.js اجزاء میں شامل ہوں گے جو ہم تخلیق کریں گے، جو جب ایک دوسرے کے ساتھ استعمال کیا جاتا ہے تو ہمارے کارسیل جزو بنائے گا.

02. Carousel سلائڈ SCSS شامل کریں

Filesilo پیکیج سے، '/support-files/step-02- slide.scss' کے مواد کو کاپی کریں 'اجزاء. ایپ-کارسیل سلائڈ. ایس ایس ایس ایس' میں. یہ سلائڈ جزو کے لئے SCSS ہے، اور اس بات کا یقین کرنے کے لئے 'Flex-Groge' کی جائیداد کا استعمال کرتا ہے اس بات کا یقین کرنے کے لئے کہ ہر سلائڈ اپنے والدین عنصر کو بھرنے کے لئے توسیع کرتا ہے.

03. سلائڈ جزو بنائیں

خالی 'اے پی پی کارسیل سلائڈ .ویو' فائل میں، vue.js اجزاء کی ساخت کو بنانے کے لئے ذیل میں شامل کریں. ہم اسے کارسیل سلائڈ کی تعمیر کے لئے ایک بنیاد کے طور پر استعمال کریں گے.

 & lt؛ سانچہ اور GT؛ & lt؛ / سانچہ اور GT؛
& lt؛ سکرپٹ اور جی ٹی؛
برآمد ڈیفالٹ {
  نام: 'اے پی پی کارسیل سلائڈ'
}
& lt؛ / script & gt؛ 

04. کارسیل سلائڈ تصاویر کے لئے ایک ٹیمپلیٹ سلاٹ شامل کریں

خالی اور ایل ٹی میں؛ سانچہ اور جی ٹی؛ carousel سلائڈ کا عنصر، ہم سلائڈ کی نمائندگی کرنے کے لئے ایک 'div' عنصر شامل کریں گے، ایک خاص سلاٹ عنصر کے ساتھ ساتھ ہم 'تصویر' کا نام کریں گے. vue.js میں، سلاٹ آپ کو ان میں ترمیم کے بغیر اجزاء کے سانچے کے ساتھ آپ کے اپنے مواد کو مداخلت کرنے میں مدد دیتا ہے. اس مثال میں، وہ استعمال کرتے ہیں لہذا ہم بعد میں سلائڈ پس منظر کے لئے تصویر پاس کر سکتے ہیں، لہذا آخر نتیجہ، جب بالآخر استعمال کیا جاتا ہے، '& lt؛ اے پی پی-کارسیل سلائڈ اور جی ٹی؛ & lt؛ img src =' alt = ' '& gt؛ & lt؛ / اے پی پی-کارسیل سلائڈ اور جی ٹی؛'.

 & lt؛ div class = "C-App-Carousel-Slide" & GT؛
  & lt؛ سلاٹ نام = "تصویری" اور جی ٹی؛ & lt؛ / سلاٹ اور جی ٹی؛
& lt؛ / div & gt؛ 

05. سلائڈ ٹیکسٹ کنٹینر شامل کریں

جو سلائڈ جزو کے لئے باقی رہتا ہے وہ متن کنٹینر کی تعمیر کرنا ہے. ہم پھر سلاٹس کا استعمال کریں گے، ایک بڑے سلائڈ عنوان کے لئے اور باقاعدگی سے متن کے لئے. ہم بھی ایک vue.js ہدایت کا استعمال کرتے ہوئے بھی 'V-IF' کو منطق کو شامل کرنے کے لئے کہا جاتا ہے، جو صرف متن کنٹینر کو دیتا ہے اگر کم از کم ایک سلاٹ میں سے ایک مواد منظور ہوجائے. 'تصویر' سلاٹ سے پہلے، 'سی ای اپلی کیشن کارسیل سلائیڈ' میں اس سنیپٹ کو شامل کریں.

 & lt؛ div class = "C-App-Carousel-Slide__Text-Block"
V-IF = "یہ. $ سلاٹس ['عنوان'] || یہ. $ سلاٹس ['متن']" اور جی ٹی؛
  & lt؛ h1 class = "C-App-Carousel-Slide__title"
  V-IF = "یہ. $ سلاٹس ['عنوان']" اور جی ٹی؛
  & lt؛ سلاٹ نام = "عنوان" اور جی ٹی؛ & lt؛ / سلاٹ اور جی ٹی؛
  & lt؛ / h1 & gt؛
  & lt؛ div class = "C-App-Carousel-Slide__Text"
  V-IF = "یہ. $ سلاٹس ['متن']" اور جی ٹی؛
  & lt؛ سلاٹ نام = "متن" اور جی ٹی؛ & lt؛ / سلاٹ اور جی ٹی؛
  & lt؛ / div & gt؛
& lt؛ / div & gt؛

06. carousel فائلوں کو بنائیں

واپس 'SRC / اجزاء' میں، 'اے پی پی کاروسیل' نامی ایک نئی ڈائرکٹری بنائیں اور پھر اس کے اندر دو نئی فائلیں: 'اے پی پی کاروسیل .ویو' اور 'اجزاء. ایپ - carousel.scss'. یہ دو vue.js اجزاء کا دوسرا حصہ رکھے گا: اہم کارسیل خود.

07. Carousel سی ایس ایس شامل کریں

خالی 'اجزاء. ایپ - carousel.scssss' میں '/ support-files/step-07- slide.scss' کے مواد کو کاپی کریں. یہ اہم carousel جزو کے لئے SCSS ہے.

08. کارسیل جزو بنائیں

اگلا 'ایپ کاروسیل .ویو' میں، ہم کارسیل جزو کی ساخت کی تعمیر کرنے جا رہے ہیں. ہم کارسیل کے اگلے اور پچھلے شبیہیں میں بعد میں استعمال کے بعد 'Appicon' اجزاء اور 'تیر' SVG درآمد کر رہے ہیں. یہ کام ایک بنیادی SVG آئکن کے نظام کو پیدا کرنے کے لئے 'SVG-sprite-لوڈر' انحصار کے ساتھ مل کر کام کرتا ہے، جو SVG 'علامات' اور اس کا استعمال 'عنصر کا استعمال کرتے ہوئے کام کرتا ہے.

 & lt؛ سانچہ اور GT؛ & lt؛ / سانچہ اور GT؛
& lt؛ سکرپٹ اور جی ٹی؛
اپیکون درآمد کریں
'@ / اجزاء / اے پی پی آئکن / اے پی پی آئکن'
سے درآمد تیر سے
'./../../assets/img/arrow.svg'
برآمد ڈیفالٹ {
  نام: 'اے پی پی کارسیل'،
  اجزاء: {
  اپیکون
  }،
  ڈیٹا () {
  واپسی {
  تیر
  }
  }
}
& lt؛ / script & gt؛ 

09. carousel سانچے کی تعمیر

چلو خالی ٹیمپلیٹ عنصر میں مواد شامل کریں. یہاں دلچسپی کا بنیادی علاقہ 'سی-اے پی-کارسیلیلیلونینر' عنصر ہے، جس میں ہم اس کے اندر موجود سلائڈ کی تعداد پر مبنی تھوڑی دیر سے چوڑائی کا حساب لگائیں گے. اس کے بعد ہم سی ایس ایس ٹرانسمیشن کا استعمال کرتے ہوئے کنٹینر منتقل کریں گے: سلائڈ تحریک کو ضم کرنے کے لئے ترجمہ یا ٹرانزیشن.

 & lt؛ div class = "C-App-Carousel" اور GT؛
  & lt؛ div class = "C-App-Carousel__wrapper" & gt؛
  & lt؛ div class = "C-App-Carousel__container" & gt؛
  & lt؛ سلاٹ اور جی ٹی؛ & lt؛ / سلاٹ اور جی ٹی؛
  & lt؛ / div & gt؛
  & lt؛ / div & gt؛
& lt؛ / div & gt؛ 

10. کارسیل کنٹرول اور تیر شامل کریں

ہم پھر HTML کو carousel کنٹرول کنٹینر اور پچھلے اور اگلے تیر کے لئے شامل کرنے کی ضرورت ہے؛ مرحلہ 8 میں درآمد شدہ آئکن کے نظام اور SVG کا استعمال کرتے ہوئے بعد میں. 'C-App-Carousel__wrapper' عنصر کے بعد ان میں شامل کریں.

 & lt؛ اے پی پی آئکن کلاس = "سی اے پی پی-آئکن-تیر-پچھلا سی اے پی پی - Carousel__arrow" استعمال = "تیر" / & gt؛
& lt؛ div class = "C-App-Carousel__Controls" اور GT؛
& lt؛ / div & gt؛
& lt؛ اے پی پی آئکن کلاس = "سی اے پی پی-آئکن-تیر-اگلا سی اے پی پی-کاروسیل __arrow" استعمال = "arrow" / & gt؛ 

11. کارسیل ڈیٹا اسٹور بنائیں اور خصوصیات شامل کریں

ہم اجزاء کے اعداد و شمار کی دکان میں تین نئی خصوصیات شامل کر رہے ہیں: 'سلائٹٹوٹل' سلائڈ کی کل تعداد کو برقرار رکھے گی؛ 'ActiveSlideindex' 'نظر انداز سلائڈ کے انڈیکس ریکارڈ کرے گا لہذا یہ کنٹینر کی پوزیشن کا حساب کرنے کے لئے استعمال کیا جا سکتا ہے؛ جبکہ خود کار طریقے سے وقفہ ٹائمر ریکارڈ کرے گا جس میں خود کار طریقے سے سلائڈ منتقلی کو متحرک کرے گا. یہ سب کو 'ActiveSlideindexx' کی استثنا کے ساتھ، جہاں '0' کی قیمت سے پتہ چلتا ہے کہ پہلی سلائڈ ڈیفالٹ سلائڈ ہونا چاہئے.

 ڈیٹا () {
  واپسی {
  تیر،
  سلائٹیٹل: نیل،
  ActiveSlideindex: 0،
  خود کار طریقے سے: نیل
  }
} 

12. سلائٹیٹولول کا حساب

ٹیمپلیٹ میں 'سی-اے پی پی-کاروسیلیلیسینر' عنصر 'ریف = "کنٹینر" کو شامل کریں اور پھر اس کے علاوہ اس کے اجزاء کے اعتراض کی جائیداد کے طور پر ذیل میں شامل کریں. 'ریفری' ایک عنصر تک آسان رسائی دینے کے لئے استعمال کیا جاتا ہے، جس میں اس معاملے میں کنٹینر ہے لہذا ہم اس بات کو شمار کرسکتے ہیں کہ کتنے بچے کے عناصر (اکا سلائڈ) یہ ہیں. ایک 'پہاڑ () کی تقریب میں اس منطق کی موجودگی کا مطلب یہ ہے کہ یہ خود کار طریقے سے چلتا ہے جب جزو پہلے پیش کیا جاتا ہے.

 پہاڑ () {
  یہ .slidetotal =.
  یہ. $ refs.container.Children.length؛
}

13. کنٹینر چوڑائی کا حساب

اجزاء میں، 'مجموعی طور پر' اور اس کے اندر ایک نئی چیز پراپرٹی کی جائیداد بنائیں، 'کنٹینرواڈتھتھ ()' کا نام ایک نیا کام. ہم اس کا استعمال کریں گے کہ 'سلائٹٹوٹل' کے اعداد و شمار پر مبنی carousel کنٹینر کی چوڑائی کا حساب لگائیں.

 computed: {
   کنٹینرواڈتھ () {
      اسے واپس لو. Slidetotal * 100 + '٪'؛
   }
} 

14. طریقوں کو بنائیں

اگلا، ہماری carousel کے افعال کو ذخیرہ کرنے کے لئے 'طریقوں' نامی ایک اور اعتراض پراپرٹی بنائیں. 'GotSlide ()' 'ActiveSlideindex' کو مرحلہ 11 سے ترتیب دینے کا ایک آسان طریقہ ہے، 'iscontrolactive ()' واپسی سچ ہے جب ایک کنٹرول کے انڈیکس 'اداکار لڈڈ انڈیکس'، جبکہ 'NegellSlide ()' اور 'پروردگار' اور 'پرسلائڈ ()' سلائڈ.

 طریقوں: {
  GotSlide (سلائڈڈڈیکس) {
  یہ StactiveSlideindex = سلائڈ انڈیکس؛
  }،
  iscontroctactive (Controlindex) {
  کنٹرول کنٹرولڈیکس - 1.
  === یہ.activeSlideindex؛
  }،
  Negellslide () {
  یہ.activeSlideindex === یہ.
  سلائٹیٹل - 1؟ یہ Standiveslideindex.
  = 0: یہ.activeSlideindex ++؛
  }،
  پچھلا سلمائڈ () {
  یہ.activeSlideindex === 0؟ یہ.
  ActiveSlideindex = it.slidetotal - 1.
  : یہ.activeSlideindex---؛
  }
} 

15. کارسیل کے کنٹینر کی پوزیشن کا حساب لگائیں

Carousel transform کے ساتھ ایک فیصد قیمت کا استعمال کرتا ہے: سلائڈ منتقلی کی سماعت کرنے کے لئے ترجمہکس اور سی ایس ایس حرکت پذیری. مندرجہ ذیل snippet 'computed' اعتراض میں شامل کریں تاکہ ہم اس قدر کا حساب کرسکیں.

 ActiveSlideposition () {
  واپسی '-' + (100 / its.slidetotal)
  * یہ.activeSlideindex + '٪'؛
} 

16. ان لائن سی ایس ایس کی تشکیل

اب ہمارے پاس تمام اقدار ہیں جو Carousel سلائڈ کنٹینر کو درست طریقے سے پوزیشن کو درست کرنے کے لئے، ہمیں سی ایس ایس کی تعمیر کرنے کی ضرورت ہے جو ہم اس کے بعد 'سٹائل' کی خاصیت میں اضافہ کریں گے. ہم اس منطق کو 'کمپیوٹنگ' اعتراض میں ایک اور تقریب کے طور پر شامل کریں گے.

 کنٹینرٹریٹر () {
  واپسی 'چوڑائی: $ {یہ. containerwidth}؛
  Transform: Translatex ($ {یہ.
  .activeslideposition})؛ `

17. بینڈ ان لائن سی ایس ایس

ٹیمپلیٹ میں 'C-App-Carousel__container' عنصر کے نیچے ذیل میں شامل کریں. یہ carousel کنٹینر کے 'سٹائل' کی خصوصیت کے پچھلے مرحلے سے 'کنٹینر ٹائل () کی واپسی کی قیمت باندھا جائے گا، مطلب یہ ہے کہ اس کی سی ایس ایس اور اس وجہ سے اس کی حیثیت خود بخود اپ ڈیٹ کی جائے گی جب چیزیں تبدیل ہوجائے گی.

 V-Bind: انداز = "کنٹینرز" 

18. اگلے / پچھلے تیر کو ہک

ہمیں اب اگلے / پچھلے تیروں میں منطق کو شامل کرنے کی ضرورت ہے تاکہ مرحلہ 14 سے صحیح طریقہ کہا جاتا ہے جب ہر متعلقہ تیر پر کلک کیا جاتا ہے. 'پچھلا سلمائڈ ()' SNIPPET 'C-App-icon-arrow-trew' عنصر پر تعلق رکھتا ہے، جبکہ 'Negintslide ()' 'C-App-Icon-arrow-arrow-eember' عنصر پر تعلق رکھتا ہے. 'V-ON' ہدایت VUE.js میں ایونٹ سننے والوں کو قائم کرنے کے لئے صرف ایک آسان طریقہ ہے، 'پر کلک کریں' ڈوم ایونٹ کے ساتھ جو ہم ھدف بناتے ہیں.

 // پچھلا
V-on: click.nate = "Prevlide ()"
// اگلے
V-on: click.native = "negellslide ()" 

19. کارسیل کنٹرولز پیدا کریں

چلو کنٹرول عناصر پیدا کرتے ہیں اور ان پر کلک کریں جب کلک کریں. 'C-App-Carousel__Controls میں ذیل میں عنصر شامل کریں. 'V-For' ہدایت 'Slidetotal' متغیر سے ملنے والے کنٹرول عناصر کو بنانے کے لئے استعمال کیا جاتا ہے، جبکہ 'V-Bind' ہدایت 'یہ فعال' کلاس کو صرف اس وقت 'فعال' طبقے کو لاگو کرتی ہے جب مرحلہ 14 ریٹائٹس سے ' سچ ہے. آخر میں، ہم ایک اور ایونٹ سننے والے کو 'V-ON' کے ذریعہ تخلیق کر رہے ہیں، جب کلک کیا جاتا ہے تو، کنٹرول 'GotSlide' کا طریقہ کار کہتے ہیں اور اس کے انڈیکس کو گزرتا ہے، جس سے متعلقہ سلائڈ کے انڈیکس سے ملنا چاہئے.

 & lt؛ div v-for = "n slidetotal میں"
: کلید = "ن" V-Bind: Class =
"{'فعال': iscontroctactive (n)}"
کلاس = "C-App-Carousel__Control"
V-on: کلک = "gotoslide (n-1)" & gt؛ & lt؛ / div & gt؛ 

20. درآمد اجزاء

اب سب سے اوپر کی سطح 'App.vue' اجزاء پر واپس آتے ہیں اور سب کچھ درآمد کریں. افتتاحی اور ایل ٹی کے بعد؛ سکرپٹ اور جی ٹی؛ ٹیگ، جزو '.vue' درآمد کریں. فائلوں:

 '@ / اجزاء / اے پی پی-کارسیل / اے پی پی کارسیل' سے اپلی کیشن کو درآمد کریں.
'@ / اجزاء / اے پی پی-کارسیل سلائڈ / اے پی پی-کارسیل سلائڈ' سے اپلی کیشن درآمد کریں. 

اگلا، 'اجزاء' اعتراض میں ترمیم کریں تاکہ یہ نئے درآمد شدہ اجزاء کا حوالہ دیتے ہیں.

 اجزاء: {
   Appbutton،
   Appcarousel،
   Appcarouselslide.
} 

آخر میں، & lt؛ سٹائل اور جی ٹی؛ ٹیگ، باقی اجزاء کے درآمد کے ساتھ ہمارے نئے ایس سی ایس ایس درآمد کریں.

 import "/ اجزاء / اے پی پی کارسیل /
اجزاء .app-carousel "؛
import "/ اجزاء / اے پی پی کارسیل سلائڈ /
اجزاء .پ کارسیل سلائڈ "؛ 

21. کارسیل اور سلائڈ شامل کریں

آخر میں، ہم اپنے نئے carousel جزو اور کچھ سلائڈ مرکزی اپلی کیشن میں شامل کرتے ہیں. اب بھی 'App.vue' میں، ذیل میں ٹکڑا کے ساتھ 'زیر تعمیر' کی جگہ لے لے. ہر & lt؛ اے پی پی کارسیل سلائڈ اور جی ٹی؛ عنصر ایک سلائڈ کی نمائندگی کرتا ہے. جیسا کہ آپ پسند کرتے ہیں، متن یا تصویر کو تبدیل کرنے کے طور پر شامل کریں. شامل ہیں 'ٹیسٹ-تصویر -1 01.jpg' ٹیسٹ-تصویر -05.jpg '. ایک بار یہ مکمل طور پر ختم ہونے کے بعد، اب سب کچھ کام کرنا چاہئے. Huzzah!

& lt؛ اے پی پی کارسیل اور جی ٹی؛
  & lt؛ اے پی پی کارسیل سلائڈ اور جی ٹی؛
  & lt؛ سانچہ سلاٹ = "عنوان" اور جی ٹی؛ میرا سلائڈ
  & lt؛ / سانچہ اور جی ٹی؛
  & lt؛ سانچہ سلاٹ = "متن" اور جی ٹی؛
  & lt؛ p & gt؛ یہ ایک carousel سلائڈ ہے. & lt؛ / p & gt؛
  & lt؛ اے پی پی بٹن اور جی ٹی؛ چلو چلو اور ایل ٹی؛ / اے پی پی بٹن اور جی ٹی؛
  & lt؛ / سانچہ اور جی ٹی؛
  & lt؛ img slot = "تصویر"
  SRC = "./ اثاثوں / img / test-photo-01.jpg"
  alt = "میری carousel تصویر" & gt؛
  & lt؛ / اے پی پی کارسیل سلائڈ اور جی ٹی؛
& lt؛ / اے پی پی-کارسیل اور جی ٹی؛ 

22. carousel پر لچک شامل کریں

اب ہمارے پاس کام کرنے والے vue.js carousel ہے، چلو کچھ اضافی فعالیت میں اضافہ کرتے ہیں لہذا ہم سلائڈ منتقلی کی مدت کو آسانی سے اپنی مرضی کے مطابق اپنی مرضی کے مطابق اپنی مرضی کے مطابق اپنی مرضی کے مطابق کر سکتے ہیں، اعلان کرتے ہیں کہ سلائڈ آٹو سلائڈ ہونا چاہئے، اور اگر ایسا ہوتا ہے تو. 'اے پی پی کاروسیل .ویو' دوبارہ کھولیں اور اجزاء کی چیز پر ذیل میں اسپیپیٹ میں خصوصیات شامل کریں.

 پروپس: {
  ٹرانزیشن: {
  قسم: سٹرنگ،
  پہلے سے طے شدہ: '0.5s'
  }،
  منتقلی: {
  قسم: سٹرنگ،
  پہلے سے طے شدہ: 'آسان'
  }
} 

23. ترمیم کنٹینرز ()

ان خصوصیات کو منظور کردہ اقدار کو اس مرحلے میں واپس سے کاروسیل کے ان لائن سی ایس ایس کو اپنا راستہ بنانا چاہئے. اب اس بات کا یقین کرنے کے لئے 'کنٹینرٹرسر' کے حساب سے کام میں ترمیم کریں.

 کنٹینرٹریٹر () {
  واپسی `چوڑائی: $ {ry.containerwidth}؛
  ٹرانسمیشن:
  Translatex ($ {{its.activeslideposition})؛
  ٹرانسمیشن ٹائمنگ تقریب:
  $ {یہ. ٹرانسمیشن}؛
  منتقلی کی مدت:
  $ {{اس. ٹرانسمیشن}؛ `
} 

24. carousel خصوصیات پر ڈیٹا پاس

مندرجہ ذیل snippet کی وضاحت کرتا ہے کہ ہم کس طرح ان نئی خصوصیات کو ڈیٹا منتقل کریں گے اور ایل ٹی؛ ایپ کاروسیل اور جی ٹی؛ عنصر 'App.vue' میں. ایک بار شامل ہونے کے بعد، آپ کو جو بھی آپ کی خواہش کی قدر کو منتقل کرنے کے قابل ہونا چاہئے. مثال کے طور پر، ایک "3.0s" کی مدت کا نتیجہ بہت سست سلائڈ منتقلی ہوگی.

 اور ایل ٹی؛ اے پی پی کاروسیل
منتقلی کی مدت = "0.25s"
ٹرانسمیشن ٹائمنگ = "آسان آؤٹ آؤٹ" اور جی ٹی؛ 

25. آٹو سلائڈ پروپس کو شامل کرنا

آٹو سلائڈ کے لئے، ہمیں 'APP-Carousel.vue میں' Props 'میں دو اضافی اشیاء شامل کرنے کی ضرورت ہے. 'آٹو' یا تو 'سچ' یا 'غلط' ہے، جو کاروسیل آٹو سلائڈ جاری رکھنا چاہئے. 'آٹومیٹنگ' آٹو سلائڈ ٹرگر سے پہلے وقت کو کنٹرول کرتا ہے، ڈیفالٹ قیمت 5000 ملیسیکنڈ کے ساتھ.

 آٹو: {
  قسم: سٹرنگ،
  پہلے سے طے شدہ: 'غلط'
}،
خود مختار: {
  قسم: سٹرنگ،
  پہلے سے طے شدہ: 5000.
} 

26. آٹو سلائڈ شروع کریں

اب ہمیں اجزاء لوڈ پر آٹو سلائڈ شروع کرنے کی ضرورت ہے. Carousel کی 'نصب () تقریب میں، موجودہ مواد کے بعد، چیک کریں کہ' آٹو 'جائیداد' سچ 'پر مقرر کیا جاتا ہے. اگر ایسا ہے تو، ایک وقفہ بنائیں جس میں 'اگلا Slidide ()' طریقہ کار 'خود مختار' کی قیمت منظور ہوئی ہے.

 اگر (یہ.auto === 'سچ') {
  یہ. AutoTriterval = setInterval (() = & gt؛ {
  یہ. nextslide ()؛
  }، پریس (یہ.autotiming))؛
} 

27. آٹو سلائڈ کا طریقہ منسوخ کریں

ظاہر ہے، ہمیں صارف کے لئے آٹو سلائڈ کو غیر فعال کرنے کے لئے کسی طرح کی ضرورت ہوتی ہے اگر انہوں نے دستی طور پر کاروسیل کو چلانے کی خواہش ظاہر کی ہے. اس کی طرف پہلا قدم 'FanceAutoSlide' کہا جاتا ہے ایک نئی carousel طریقہ ہے. یہ صرف پچھلے مرحلے میں پیدا کردہ وقفہ کو منسوخ کر دے گا.

 CanceBautoslide () {
   Cleartherval (یہ. Autiververal)؛
} 

28. ٹرگر FaceBautoSlide.

اگر صارف ایک تیر یا کنٹرول عنصر پر کلک کرتا ہے، تو یہ فرض کرنا مناسب ہے کہ وہ دستی طور پر کاروسیل کو چلانا چاہتے ہیں، تو ہم 'CanceNautoslide' کا طریقہ کار کہتے ہیں اگر ان میں سے کسی بھی عناصر پر کلک کریں. ایسا کرنے کے لئے، صرف ہر عناصر 'V-ON' ہدایت پر '+ CanceNautoSlide ()' شامل کریں. 'پچھلا' سلائڈ تیر کا استعمال کرتے ہوئے مثال کے طور پر ذیل میں ملاحظہ کریں.

 V-on: click.natout = "prevslide () + CanceBautoslide ()" 

29. آٹو سلائڈ پروپس کو منتقل کریں

آخر میں، ہم نے کچھ اقدار کو خود کار طریقے سے سلائڈ خصوصیات میں منتقل کر دیا ہے. واپس 'App.vue' میں، ذیل میں snippet کو شامل کریں اور ایل ٹی؛ اے پی پی کاروسیل اور جی ٹی؛ آٹو سلائڈ کو ہر تین سیکنڈ کو فعال کرنے کے عنصر.

 آٹو = "سچ" آٹو ٹائمنگ = "3000"

30. کارسیل جزو کی تعمیر ختم

ترقیاتی سرور کو منسوخ کریں، یا ایک نیا ٹرمینل ونڈو کھولیں، اور 'این پی ایم رن کی تعمیر' کو چلائیں تاکہ آپ کے vue.js کے 'DIST' ڈائرکٹری میں آپ کے vue.js طاقتور کارسیل جزو کے ایک مرتب شدہ تیار ورژن بنائیں.

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین ویب ڈیزائنر کے مسئلہ 269 میں شائع کیا گیا تھا. مسئلہ 269 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

ویب ڈیزائن ایونٹ پیدا لندن 19-21 ستمبر 2018 کو واپسی، انڈسٹری کے معروف اسپیکرز کے ایک پیکڈ شیڈول، ورکشاپس اور قیمتی نیٹ ورکنگ کے مواقع کا ایک مکمل دن پیش کرتے ہیں - اسے یاد نہیں کرتے. آپ کو حاصل کرو پیدا ابھی تک ٹکٹ .

متعلقہ مضامین:

• آج کے ویب ڈیزائنر کے لئے ضروری اوزار
• اپنی ویب سائٹ پر ایک چمک اثر شامل کریں
• 6 حیرت انگیز 'کے بارے میں' صفحات آپ کو متاثر کرنے کے لئے