কীভাবে এইচটিএমএল, সিএসএস  ব্যবহার করে স্লাইডার অ্যানিমেশন গ্যালারি  তৈরি করা যায় ?


এইচটিএমএল, সিএসএস ব্যবহার করে স্লাইডার অ্যানিমেশন গ্যালারি  তৈরি করা শিখব ।

প্রায় জিজ্ঞাসিত প্রশ্ন:

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে স্লাইডার অ্যানিমেশন গ্যালারি  তৈরি করা যায় ?


কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে  যখন ছবির উপর ক্লিক করলে বর্ণনা শো করবে এমন কিছু তৈরি করা যায়?


কীভাবে এইচটিএমএল, সিএসএস  ব্যবহার করে সক্রিয় স্লাইডার অ্যানিমেশন গ্যালারি  তৈরি করা যায় ?


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

🍃
Source Code:





১. এইচটিএমএল অংশ তৈরি

  
আমরা যেগুলো স্লাইডার অ্যানিমেশন গ্যালারি  এর ভিতরে রাখব। সেগুলো আমাদের     <div class="image_container"></div> ট্যাগের মধ্যে রাখতে হবে । অর্থাৎ যদি আপনি আরো ফটো যুক্ত করতে চান তাহলে আপনাকে  নিচের উদাহরণ অনুসরণ করে এইচটিএমএল তৈরি করতে হবে ।
উদাহরণস্বরূপ : আপনি একটি ফটো , কিছু টেক্সট বর্ণনা যুক্ত করতে চাইলেন ?
সমাধান :
<div class="image_container">
<img src="/Gallery/pick.png" />
<span class="title">এখানে ছবির টাইটেল লিখুন</span>
<span class="description">
এখানে ছবির বর্ণনা লিখুন.</span>
<span class="line top"></span>
<span class="line left"></span>
</div>
 
একইভাবে আপনি টেক্সট, ইত্যাদি যুক্ত করতে পারেন ।  এখন আপনি স্লাইডার অ্যানিমেশন গ্যালারি এর বাহিরে কিছু যুক্ত করতে চাইলে : আপনাকে </div> এর পর যুক্ত করতে হবে। অথবা আপনি image_container এই ক্লাস ছাড়া অন্য ক্লাসে যুক্ত করলে সেগুলো স্লাইডার অ্যানিমেশন গ্যালারি এর বাহিরে দেখাবে ।


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


 ২ সিএসএস অংশ তৈরি ।

  অযথা কন্টেন্ট বড় না করার জন্য এখানে শুধুমাত্র আপনাকে কী পরিবর্তন করতে হবে তাই শিখাব । প্রত্যেক লাইন ভেঙে ভেঙে বা আলাদা করে তৈরি বা শিখানো খুবই কষ্টসাধ্য ব্যাপার । আপনার যদি কোথাও সমস্যা হয় তবে আপনি আমাকে জানাতে পারেন । এখন আমরা Hover এর রং পরিবর্তন করতে শিখব : নিচে খেয়াল করুন ।
background-color:red; hsl(771, 76%, 53%);

এইভাবে আপনি রং নির্বাচন করতে পারেন ।

এখন আমরা ট্রান্সফর্ম করা শিখব -

transform: scale(0);

এখানে 0 মানে হচ্ছে কেউ এমনি বর্ণনা দেখতে পারবে না । যখন আমরা ছবিতে ক্লিক করব তখন 1 হবে এবং আমরা তা দেখতে পারব ।
অর্থাৎ 1 দিলে সাথে সাথে দেখাবে কিন্ত আমরা তা চাইবো না । আমরা ক্লিক করার পর দেখাতে চাই ।


রেজাল্ট বা ফলাফল :









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


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





    My Talk:

    Thank you for reading this blog.
    Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!