কম্পিউটার টিউটোরিয়াল

বুটস্ট্র্যাপ ফ্রেমওয়ার্ক ব্যবহার করে ক্যারousel তৈরি করা

যখন আমরা ক্যারোসেল (carousel) শব্দ শুনি, তখন সাধারণত শিশুকালে যেটি ভ্রমণ করেছি সেই অমুশমেন্ট পার্কের রাইডটি মনে পড়ে—একটি বড় প্ল্যাটফর্ম যা ঘোরে রঙিন मेरी-গো-রাউন্ড ঘোড়াগুলো রাইড প্রগ্রেস কর wraz সাথে আপ-ডাউন করে।

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

শুরু করা

বুটস্ট্র্যাপ ক্যারোসেল সেট আপ করার জন্য আমাদের প্রথমে করতে হবে সঠিক ডিপেন্ডেন্সিগুলো আছে কিনা তা নিশ্চিত করা। এর জন্য আমাদের বুটস্ট্র্যাপ, PopperJS, এবং jQuery দরকার। আপনার প্রজেক্টে আপনার ডিপেন্ডেন্সিগুলো যোগ করতে সহায়তার জন্য বুটস্ট্র্যাপের Quick Start পেজটি দেখুন।

ডিপেন্ডেন্সি রিকোয়ারমেন্ট কীভাবে হ্যান্ডল করবেন সেটি আপনার সিদ্ধান্ত, কিন্তু সবচেয়ে সহজ, বিগিনার-ফ্রেন্ডলি উপায় হলো jQuery, Popper.js, এবং বুটস্ট্র্যাপের জন্য কন্টেন্ট ডেলিভারি নেটওয়ার্ক—সিডিএন (CDN) ব্যবহার করা। আপনার <script> ট্যাগের অর্ডারের प्रति সতর্ক থাকুন—অর্ডার এখানে গুরুত্বপূর্ণ।

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

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

Introduction/Getting Started পেজের বাম দিকে, আপনি একটি সাইডবার দেখবেন যা বিভিন্ন জিনিসের সাথে লিংক করা। Components লিংকটি খুঁজে বের করুন এবং সেটিতে ক্লিক করুন। এটি আপনাকে বুটস্ট্র্যাপের много উপলব্ধ কম্পোনেন্টের প্রথমটিতে নেভিগেট করবে: Alerts। আপনি যদি সাইডবারটি আবার দেখেন, তবে এখন সেটি আমাদের কাছে উপলব্ধ সব কম্পোনেন্টের আলাদা আলাদা লিংক দেখাচ্ছে।

Carousel কম্পোনেন্টটিতে ক্লিক করুন শুরু করতে। এতে আমাদের যা দরকার সেটি থাকবে।

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

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

বেসিক স্ট্রাকচার

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bootstrap Navbar</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Bootcamps </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Popular Bootcamps</a> <a class="dropdown-item" href="#">Bootcamp Prep</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Bootcamp Financing</a> <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Coding </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Coding Tools</a> <a class="dropdown-item" href="#">Git</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">CSS</a> <a class="dropdown-item" href="#">JS</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Python</a> <a class="dropdown-item" href="#">Ruby</a> <a class="dropdown-item" href="#">C++</a> <a class="dropdown-item" href="#">Java</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Career Resources </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item smallcaps" href="#">Career Advice</a> <a class="dropdown-item smallcaps" href="#">Interviews</a> <div class="dropdown-divider"></div> <a class="dropdown-item smallcaps" href="#">Tech Cities</a> <a class="dropdown-item smallcaps" href="#">Tech Salaries</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tech Fields </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Web Design</a> <a class="dropdown-item" href="#">Web Development</a> <a class="dropdown-item" href="#">Software Engineering</a> <a class="dropdown-item" href="#">Data Science</a> </div> </li> <li class="nav-item"> <a class="nav-link smallcaps" href="#">News & Commentary</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"><img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="..."> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html>

উপরে দেখা কিছু অ্যাট্রিবিউট যা আপনার জন্য নতুন হতে পারে এবং তাদের অর্থ: 

অ্যাট্রিবিউটঅর্থ
data-ride="carousel"পেজ লোড হলে অ্যানিমেট করে।
data-interval="false | [num in ms]"যদি false সেট করা থাকে, ক্যারোসেল অটোমেটিক্যালি সাইকেল করবে না। অন্যথায়, এটি মিলিসেকেন্ডে সংখ্যার ভিত্তিতে সাইকেল করবে।
data-pause="hover"যখন ব্যবহারকারী ক্যারোসেলের ওপর হোভার করবে, ক্যারোসেল করেন্ট এক্টিভ ইমেজে পজ করবে। মাউস লিভ করলে, ক্যারোসেল সাইক্লিং প্রসেস রিজিউম করবে।
class="active"কোন ইমেজ দেখাতে হবে সেটি জানতে active দরকার।
class="d-block"display: block;
class="w-100"width: 100%;

কন্ট্রোলসহ (With Controls)

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

নিচের কোড স্নিপেটে, আপনি ইমেজের দুপাশে একটি পровалиযউস (previous) এবং একটি নেক্সট (next) অ্যারো দেখবেন। টাইমারের ওপর ভিত্তি করে আগের মতো কাজ করার পাশাপাশি, ইমেজটি পরিবর্তন হবে যদি ব্যবহারকারী অ্যারোদের যেকোনো একটি ওপর ক্লিক করে।

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bootstrap Navbar</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Bootcamps </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Popular Bootcamps</a> <a class="dropdown-item" href="#">Bootcamp Prep</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Bootcamp Financing</a> <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Coding </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Coding Tools</a> <a class="dropdown-item" href="#">Git</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">CSS</a> <a class="dropdown-item" href="#">JS</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Python</a> <a class="dropdown-item" href="#">Ruby</a> <a class="dropdown-item" href="#">C++</a> <a class="dropdown-item" href="#">Java</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Career Resources </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item smallcaps" href="#">Career Advice</a> <a class="dropdown-item smallcaps" href="#">Interviews</a> <div class="dropdown-divider"></div> <a class="dropdown-item smallcaps" href="#">Tech Cities</a> <a class="dropdown-item smallcaps" href="#">Tech Salaries</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tech Fields </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Web Design</a> <a class="dropdown-item" href="#">Web Development</a> <a class="dropdown-item" href="#">Software Engineering</a> <a class="dropdown-item" href="#">Data Science</a> </div> </li> <li class="nav-item"> <a class="nav-link smallcaps" href="#">News & Commentary</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html>

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

Next Control:

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

Outermost Container of Carousel:

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

হাইলাইট করা অংশগুলো মিলতে হবে যাতে লিংকগুলো কাজ করে।

ইনডিকেটরসহ (With Indicators)

কন্ট্রোলস ব্যবহার করে ক্যারোসেলের সাইক্লিং অপারেট করার পাশাপাশি, আপনি আপনার ক্যারোসেলে কতগুলো ব্লক এলিমেন্ট রয়েছে সেটি দেখিয়ে আপনি কোন ইমেজে আছেন সেটি ইন্ডিকেট করতে পারেন। এগুলো কন্ট্রোলসের সাথে ট্যান্ডেমে ব্যবহার করা যায়।

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bootstrap Navbar</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Bootcamps </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Popular Bootcamps</a> <a class="dropdown-item" href="#">Bootcamp Prep</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Bootcamp Financing</a> <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a> </div> </li> <li class="nav-item dropdown">lid <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Coding </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Coding Tools</a> <a class="dropdown-item" href="#">Git</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">CSS</a> <a class="dropdown-item" href="#">JS</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Python</a> <a class="dropdown-item" href="#">Ruby</a> <a class="dropdown-item" href="#">C++</a> <a class="dropdown-item" href="#">Java</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Career Resources </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item smallcaps" href="#">Career Advice</a> <a class="dropdown-item smallcaps" href="#">Interviews</a> <div class="dropdown-divider"></div> <a class="dropdown-item smallcaps" href="#">Tech Cities</a> <a class="dropdown-item smallcaps" href="#">Tech Salaries</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tech Fields </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Web Design</a> <a class="dropdown-item" href="#">Web Development</a> <a class="dropdown-item" href="#">Software Engineering</a> <a class="dropdown-item" href="#">Data Science</a> </div> </li> <li class="nav-item"> <a class="nav-link smallcaps" href="#">News & Commentary</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html>

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

উপসংহার

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

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

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

বুটস্ট্র্যাপ ব্যবহার করার আপনার যাত্রায় শুভকামনা!

  1. CSS দিয়ে রেসপন্সিভ "Meet The Team" পেজ তৈরি

  2. CSS দিয়ে আইকনসহ ফর্ম তৈরি করার পদ্ধতি

  3. কমান্ড প্রম্পট ব্যবহার করে উইন্ডোজে রিস্টোর পয়েন্ট তৈরি করা

  4. Tkinter-এ OptionMenu উইজেট ব্যবহার করে ফাংশন কল কীভাবে করবেন?