একটি ক্যারোজেল তৈরি করতে বুটস্ট্র্যাপ ফ্রেমওয়ার্ক ব্যবহার করা

যখন আমরা একটি ক্যারাউজেলের কথা চিন্তা করি, তখন সাধারণত যেটা মনে আসে তা হল বিনোদন পার্কের রাইড যা আপনি হয়তো ছোটবেলায় চড়েছেন – একটি বড় প্ল্যাটফর্ম যা রঙিন আনন্দময় ঘোড়ার সাথে ঘুরতে থাকে যা রাইডের অগ্রগতির সাথে সাথে উপরে এবং নিচে যায়।

একটি বুটস্ট্র্যাপ ক্যারোজেল এমন মজার ন্যায্য বৈচিত্র নয় যা আমরা ছোটবেলায় জেনে এসেছি, তবে ধারণাটির মিল রয়েছে। এই নিবন্ধটি পর্যালোচনা করে কিভাবে বুটস্ট্র্যাপ দিয়ে শুরু করা যায়, ক্যারোজেল UI উপাদানটি কী, কখন এটি ব্যবহার করা ভাল এবং বুটস্ট্র্যাপ ফ্রেমওয়ার্ক ব্যবহার করে কীভাবে একটি তৈরি করা যায় তা নিয়ে আলোচনা করা হয়েছে।

শুরু করা

একটি বুটস্ট্র্যাপ ক্যারোজেল সেট আপ করার জন্য আমাদের যা করতে হবে তা হল আমাদের সঠিক নির্ভরতা নিশ্চিত করা। এর জন্য আমাদের বুটস্ট্র্যাপ, পপারজেএস এবং jQuery দরকার। আপনার প্রোজেক্টে আপনার নির্ভরতা যোগ করার জন্য সহায়তার জন্য বুটস্ট্র্যাপের দ্রুত শুরু পৃষ্ঠাটি দেখুন।

আপনি নির্ভরতার প্রয়োজনীয়তা কীভাবে পরিচালনা করবেন তা আপনার সিদ্ধান্ত, তবে সবচেয়ে সহজ, আরও শিক্ষানবিস-বান্ধব উপায় হল jQuery, Popper.js এবং Bootstrap-এর জন্য সামগ্রী বিতরণ নেটওয়ার্ক – CDN – ব্যবহার করা। আপনার <script> এর অর্ডার সম্পর্কে সতর্ক থাকুন ট্যাগ - অর্ডার এখানে গুরুত্বপূর্ণ.

আপনি এখন শুরু করার জন্য প্রস্তুত!

ক্যারোজেল তৈরি করতে বুটস্ট্র্যাপ ডকুমেন্টেশন ব্যবহার করা

Introduction/Getting Started এর বাম দিকে পৃষ্ঠায়, আপনি একটি সাইডবার দেখতে পাচ্ছেন যা বিভিন্ন জিনিসের সাথে লিঙ্ক করে। Components দেখুন লিঙ্ক এবং এটিতে ক্লিক করুন। এটি আপনাকে বুটস্ট্র্যাপের অনেকগুলি উপলব্ধ উপাদানের প্রথমটিতে নেভিগেট করবে:Alerts . আমরা যদি আবার সাইডবারটি দেখি, এটি এখন আমাদের কাছে উপলব্ধ সমস্ত বিভিন্ন উপাদানের বিভিন্ন লিঙ্ক দেখায়।

Carousel-এ ক্লিক করুন শুরু করার জন্য উপাদান। এতে আমাদের প্রয়োজনীয় তথ্য থাকবে।

এটি কিভাবে কাজ করে

বুটস্ট্র্যাপ সিএসএস ট্রান্সফর্ম প্রপার্টি এবং কিছু জাভাস্ক্রিপ্টের সুবিধা নেয় ক্যারোজেল পরিচালনা করার জন্য যখন এটি এক স্লাইড থেকে পরবর্তীতে চলে যায়। সবচেয়ে মৌলিক ক্যারোজেল হল ছবি বা মার্কআপের একটি সিরিজ যা নির্দিষ্ট সময়ের পরে এক থেকে পরের দিকে চলে যায়।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

মৌলিক কাঠামো

এখানে উপরে দেখা কিছু গুণাবলী রয়েছে যা আপনি আপনার কাছে নতুন হতে পারেন এবং তাদের অর্থ:

নিয়ন্ত্রণ সহ

এই মৌলিক সাইক্লিং কাঠামোর পাশাপাশি, বুটস্ট্র্যাপ উপাদানটির জন্য ক্যারোজেল নিয়ন্ত্রণ অফার করে। এখানেই জাভাস্ক্রিপ্টের সিংহভাগ খেলায় আসে। বুটস্ট্র্যাপ তাদের JavaScript util ফাংশন ব্যবহার করে যখন একজন ব্যবহারকারী কন্ট্রোলে ক্লিক করে তখন ক্যারাউজেলকে কাজ করে।

নীচের এই কোড স্নিপেটে, আপনি চিত্রের উভয় পাশে একটি পূর্ববর্তী এবং পরবর্তী তীর দেখতে পাবেন। এটি পূর্বের মতো কাজ করার পাশাপাশি (একটি টাইমারে), ব্যবহারকারী যদি তীরগুলির একটিতে ক্লিক করেন তবে চিত্রটি পরিবর্তিত হবে৷

         
 
 
  
 
  
 
  
 
   আগের 
   পরবর্তী 

      

 কন্ট্রোলগুলি কীভাবে কাজ করে সে সম্পর্কে বোঝার জন্য বড় বিষয় হল যে href কে ক্যারোজেলের সামগ্রিক ডিভের অনন্য আইডির সাথে মেলে। 
 
 

 পরবর্তী নিয়ন্ত্রণ:
 

 <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
 
 

 ক্যারোজেলের বাইরেরতম ধারক:
 

  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
 
 

 লিঙ্কগুলি কাজ করার জন্য হাইলাইট করা অঞ্চলগুলিকে মিলতে হবে। 
 
সূচক সহ
 

 ক্যারোজেলের সাইকেল চালানোর জন্য নিয়ন্ত্রণগুলি ব্যবহার করার পাশাপাশি, আপনার ক্যারোজেলে কতগুলি ব্লক উপাদান রয়েছে তা দেখিয়ে আপনি কোন ছবিতে আছেন তা নির্দেশ করতে পারেন। এগুলি নিয়ন্ত্রণের সাথে একসাথে ব্যবহার করা যেতে পারে। 
 
 
         
 
 

 

 

 
 
 
  
 
  
   আগের 
  পরবর্তী 
   
 

 উপরের কোড স্নিপেটে অর্ডার করা তালিকা যা নির্দেশকগুলি প্রদর্শন করে। .active ক্লাসটি carousel-items-এর সক্রিয় ক্লাসের সাথে মেলে . 
 
উপসংহার
 

 এটি প্রথমে হজম করার মতো অনেক তথ্য বলে মনে হতে পারে। মনে রাখা প্রধান জিনিস শুধু ডকুমেন্টেশন অনুসরণ করা হয়. ডকুমেন্টেশন এত ভালভাবে লিখিত এবং বিস্তারিত হলে এটি কিভাবে করতে হবে তা মুখস্ত করার প্রয়োজন নেই। 
 
 

 বুটস্ট্র্যাপের প্রান্তে সবকিছু কীভাবে কাজ করে সে সম্পর্কে সচেতন হওয়া অবশ্যই একটি ভাল ধারণা – বুটস্ট্র্যাপে কীভাবে উপাদানগুলি স্টাইল এবং স্ক্রিপ্ট করা আছে তা দেখার জন্য আপনার কাছে সময় থাকলে সেই মিনিফাইড CSS এবং JS ফাইলটি দেখুন। এছাড়াও, উদাহরণ কোডে সমস্ত বৈশিষ্ট্যের অর্থ কী তা অন্তত সচেতন থাকুন যাতে আপনি এটিকে আপনার প্রয়োজন অনুসারে তৈরি করতে এবং আপনার প্রকল্পে এটি ব্যবহার করতে পারেন। 
 
 

 একটি চূড়ান্ত জিনিস:সচেতন থাকুন যে ক্যারোজেল উপাদানটি অ্যাক্সেসযোগ্যতার ক্ষেত্রে ব্যবহার করার জন্য সেরা নাও হতে পারে। আপনার পৃষ্ঠাটিকে যতটা সম্ভব অ্যাক্সেসযোগ্য করে তোলার বিষয়ে নিশ্চিত হন এবং আপনার ক্যারোজেলে এমন তথ্য ব্যবহার করবেন না যা অন্য কোথাও পাওয়া যাবে না। 
 
 

 বুটস্ট্র্যাপ ব্যবহার করে আপনার যাত্রা চালিয়ে যাওয়ার জন্য শুভকামনা!