কিভাবে 3 টি সহজ ধাপে একটি জাভাস্ক্রিপ্ট স্লাইডশো তৈরি করবেন

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

আজ আমি আপনাকে দেখাব কিভাবে শুরু থেকে একটি জাভাস্ক্রিপ্ট স্লাইডশো তৈরি করা যায়। আসুন সরাসরি ঝাঁপ দাও!

---

---

পূর্বশর্ত

কোডিং শুরু করার আগে আপনাকে কিছু জিনিস জানতে হবে। আপনার পছন্দের একটি উপযুক্ত ওয়েব ব্রাউজার এবং পাঠ্য সম্পাদকের পাশাপাশি (আমি সুপারিশ করি সাবলাইম টেক্সট ), আপনার সাথে কিছু অভিজ্ঞতা প্রয়োজন এইচটিএমএল , সিএসএস , জাভাস্ক্রিপ্ট , এবং jQuery ।

আপনি যদি আপনার দক্ষতায় এতটা আত্মবিশ্বাসী না হন তবে নিশ্চিত করুন যে আপনি ডকুমেন্ট অবজেক্ট মডেল ব্যবহার করার জন্য আমাদের গাইড এবং CSS শেখার জন্য এই টিপসটি পড়েছেন। আপনি যদি জাভাস্ক্রিপ্ট নিয়ে আত্মবিশ্বাসী হন কিন্তু আগে কখনও jQuery ব্যবহার করেন নি, তাহলে jQuery এর জন্য আমাদের মৌলিক নির্দেশিকাটি দেখুন।

1. শুরু করা

এই স্লাইডশোতে বেশ কয়েকটি বৈশিষ্ট্য প্রয়োজন:

1. ছবির জন্য সমর্থন
2. ছবি পরিবর্তন করার জন্য নিয়ন্ত্রণ
3. একটি টেক্সট ক্যাপশন
4. স্বয়ংক্রিয় মোড

এটি বৈশিষ্ট্যগুলির একটি সহজ তালিকা বলে মনে হচ্ছে। স্বয়ংক্রিয় মোড স্বয়ংক্রিয়ভাবে ক্রমগুলিতে ছবিগুলিকে পরবর্তীটিতে নিয়ে যাবে। এখানে কোন কোড লেখার আগে আমি মোটামুটি স্কেচ করেছি:

যদি আপনি ভাবছেন কেন পরিকল্পনা নিয়ে বিরক্ত হচ্ছেন, তাহলে ইতিহাসের এই সবচেয়ে খারাপ প্রোগ্রামিং ভুলগুলি দেখুন। এই প্রকল্পটি কাউকে হত্যা করবে না, তবে বড় কোডে কাজ করার আগে কোড এবং পরিকল্পনার পদ্ধতি সম্পর্কে দৃ understanding় ধারণা থাকা গুরুত্বপূর্ণ - এমনকি যদি এটি কেবল একটি রুক্ষ স্কেচ হয়।

---

---

এখানে শুরু করার জন্য আপনাকে প্রাথমিক HTML প্রয়োজন। এটি একটি উপযুক্ত নামের একটি ফাইলে সংরক্ষণ করুন, যেমন index.html :







MUO Slideshow










Windmill





Plant





Dog


❮
❯




কোডটি দেখতে কেমন তা এখানে:

---

---

এটা একটু আবর্জনা তাই না? আমরা এটি উন্নত করার আগে এটি ভেঙ্গে যাক।

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

শরীরের ভিতরে একটি id আছে যার একটি id আছে প্রদর্শন কনটেইনার । স্লাইডশো সংরক্ষণের জন্য এটি একটি মোড়ক বা বাইরের ধারক। আপনি পরে CSS এর মাধ্যমে এটি উন্নত করবেন। এই কন্টেইনারের ভিতরে কোডের তিনটি ব্লক রয়েছে, প্রত্যেকটি একই রকমের উদ্দেশ্য নিয়ে।

একটি অভিভাবক শ্রেণীর একটি শ্রেণীর নাম দিয়ে সংজ্ঞায়িত করা হয় imageContainer :

এটি একটি একক স্লাইড সংরক্ষণ করতে ব্যবহৃত হয় - একটি ছবি এবং ক্যাপশন এই পাত্রে সংরক্ষিত থাকে। প্রতিটি পাত্রে একটি স্বতন্ত্র আইডি থাকে, যার মধ্যে রয়েছে অক্ষর মধ্যে_ এবং একটি সংখ্যা। প্রতিটি কন্টেইনারের একটি ভিন্ন সংখ্যা আছে, এক থেকে তিন পর্যন্ত।

একটি চূড়ান্ত পদক্ষেপ হিসাবে, একটি চিত্র উল্লেখ করা হয়, এবং ক্যাপশনটি একটি ডিভির ভিতরে সংরক্ষণ করা হয় ক্যাপশন শ্রেণী:



Dog


আমি আমার ছবিগুলি সংখ্যাসূচক ফাইলের নাম দিয়ে তৈরি করেছি, এবং সেগুলি একটি ফোল্ডারের মধ্যে সংরক্ষণ করেছি ছবি । আপনি আপনার পছন্দের যেকোনো কিছু কল করতে পারেন, যদি আপনি মেলাতে HTML আপডেট করেন।

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

অবশেষে, নেভিগেশন বোতাম তৈরি করা হয়। এটি ব্যবহারকারীকে চিত্রগুলির মাধ্যমে নেভিগেট করার অনুমতি দেয়:

❮
❯

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

2. সিএসএস

এখন যেহেতু মূল কাঠামোটি রয়েছে, এটি দেখার মতো সময় এসেছে সুন্দর । এই নতুন কোডের পরে এটি দেখতে কেমন হবে তা এখানে:

আপনার মধ্যে এই CSS যোগ করুন শৈলী ট্যাগ:

html {
font-family: helvetica, arial;
}
#showContainer {
/* Main wrapper for all images */
width: 670px;
padding: 0;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.navButton {
/* Make buttons look nice */
cursor: pointer;
float: left;
width: 25px;
height: 22px;
padding: 10px;
margin-right: 5px;
overflow: hidden;
text-align: center;
color: white;
font-weight: bold;
font-size: 18px;
background: #000000;
opacity: 0.65;
user-select: none;
}
.navButton:hover {
opacity: 1;
}
.caption {
float: right;
}
.imageContainer:not(:first-child) {
/* Hide all images except the first */
display: none;
}

এখন অনেক ভালো লাগছে তাই না? আসুন কোডটি দেখে নিই।

আমি সব নমুনা ছবি ব্যবহার করছি 670 x 503 পিক্সেল , তাই এই স্লাইডশোটি বেশিরভাগই সেই সাইজের ছবির চারপাশে ডিজাইন করা হয়েছে। যদি আপনি ভিন্ন আকারের ছবি ব্যবহার করতে চান তাহলে আপনাকে CSS যথাযথভাবে সামঞ্জস্য করতে হবে। আমি আপনাকে সুপারিশ করছি যে আপনি আপনার ইমেজগুলিকে মাপসই আকারে পরিবর্তন করুন - বিভিন্ন মাত্রার বিভিন্ন ছবি স্টাইলিং সমস্যার সৃষ্টি করবে।

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

1. কার্সার: নির্দেশক - যখন আপনি আপনার কার্সারটি বোতামগুলির উপর সরান তখন এটি একটি তীর থেকে একটি নির্দেশক আঙুলে কার্সার পরিবর্তন করে।
2. অস্বচ্ছতা: 0.65 - এটি বোতামগুলির স্বচ্ছতা বাড়ায়।
3. ব্যবহারকারী-নির্বাচন: কোনটিই নয় - এটি নিশ্চিত করে যে আপনি দুর্ঘটনাক্রমে বোতামগুলিতে পাঠ্যটি হাইলাইট করতে পারবেন না।

আপনি বোতামগুলিতে এই কোডের বেশিরভাগ ফলাফল দেখতে পারেন:

এখানে সবচেয়ে জটিল অংশ হল এই অদ্ভুত দেখতে লাইন:

.imageContainer:not(:first-child) {

এটি বেশ অস্বাভাবিক মনে হতে পারে, তবে এটি মোটামুটি স্ব -ব্যাখ্যামূলক।

প্রথমত, এটি imageContainer শ্রেণী দ্য :না() বাক্য গঠন বলে যে বন্ধনীর ভিতরে থাকা যেকোনো উপাদান হতে হবে ছাঁটা এই স্টাইল থেকে। অবশেষে, :প্রথম সন্তান সিনট্যাক্সে বলা হয়েছে যে এই CSS নামের সাথে মিলে যাওয়া কোন উপাদানকে লক্ষ্য করা উচিত কিন্তু প্রথম উপাদান উপেক্ষা করুন। এটার কারন খুবিই সাধারন. যেহেতু এটি একটি স্লাইডশো, একটি সময়ে শুধুমাত্র একটি ছবি প্রয়োজন। এই সিএসএস প্রথম ছবি ছাড়া সব ছবি লুকিয়ে রাখে।

3. জাভাস্ক্রিপ্ট

ধাঁধার চূড়ান্ত অংশ হল জাভাস্ক্রিপ্ট। স্লাইডশোকে সঠিকভাবে কাজ করার জন্য এটিই যুক্তি।

আপনার এই কোড যোগ করুন লিপি ট্যাগ:

$(document).ready(function() {
$('#previous').on('click', function(){
// Change to the previous image
$('#im_' + currentImage).stop().fadeOut(1);
decreaseImage();
$('#im_' + currentImage).stop().fadeIn(1);
});
$('#next').on('click', function(){
// Change to the next image
$('#im_' + currentImage).stop().fadeOut(1);
increaseImage();
$('#im_' + currentImage).stop().fadeIn(1);
});
var currentImage = 1;
var totalImages = 3;
function increaseImage() {
/* Increase currentImage by 1.
* Resets to 1 if larger than totalImages
*/
++currentImage;
if(currentImage > totalImages) {
currentImage = 1;
}
}
function decreaseImage() {
/* Decrease currentImage by 1.
* Resets to totalImages if smaller than 1
*/
--currentImage;
if(currentImage <1) {
currentImage = totalImages;
}
}
});

এটা পাল্টা-স্বজ্ঞাত মনে হতে পারে, কিন্তু আমি কোডের প্রাথমিক ব্লকগুলি এড়িয়ে যাচ্ছি, এবং অর্ধেক পথ থেকে কোডটি ব্যাখ্যা করার জন্য সরাসরি ঝাঁপ দাও-চিন্তা করবেন না, আমি সমস্ত কোড ব্যাখ্যা করি!

আপনাকে দুটি ভেরিয়েবল সংজ্ঞায়িত করতে হবে। (জাভাস্ক্রিপ্টে ভেরিয়েবলগুলি কীভাবে সংজ্ঞায়িত করা যায় তা এখানে।) এই ভেরিয়েবলগুলি স্লাইডশোর জন্য প্রধান কনফিগারেশন ভেরিয়েবল হিসাবে চিন্তা করা যেতে পারে:

var currentImage = 1;
var totalImages = 3;

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

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

শুরুতে কোডে ফিরে যান। এই কোডটি পরবর্তী এবং পূর্ববর্তী বোতামগুলিকে 'লক্ষ্যবস্তু' করে। যখন আপনি প্রতিটি বোতামে ক্লিক করেন, এটি উপযুক্ত কল করে বৃদ্ধি অথবা হ্রাস পদ্ধতি একবার সম্পূর্ণ হলে, এটি কেবল পর্দায় ছবিটি বিবর্ণ করে, এবং নতুন ছবিতে বিবর্ণ হয়ে যায় (যেমন দ্বারা সংজ্ঞায়িত বর্তমান ছবি পরিবর্তনশীল)।

দ্য থামুন () পদ্ধতিটি jQuery এ নির্মিত। এটি যে কোনও মুলতুবি ইভেন্ট বাতিল করে। এটি নিশ্চিত করে যে প্রতিটি বোতাম প্রেস মসৃণ, এবং এর মানে হল যে আপনি 100 টি বোতাম প্রেস করবেন না যদি আপনি মাউসে একটু পাগল হয়ে যান। দ্য ফেইডইন (1) এবং বিবর্ণ (1) পদ্ধতিগুলি ইমেজগুলির মধ্যে প্রয়োজনীয় বা বিবর্ণ হয়ে যায়। সংখ্যাটি মিলিসেকেন্ডে বিবর্ণ হওয়ার সময়কাল নির্দিষ্ট করে। এটিকে 500 এর মত বড় সংখ্যায় পরিবর্তন করার চেষ্টা করুন যাইহোক, খুব বেশি দূরে যান এবং আপনি চিত্র পরিবর্তনের মধ্যে অদ্ভুত ঘটনা বা 'ঝলকানি' দেখতে শুরু করতে পারেন। কর্মের স্লাইডশো এখানে:

স্বয়ংক্রিয় অগ্রগতি

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

কম্পিউটার ইন্টারনেটের সাথে সংযুক্ত হবে না

এটি jQuery এর সাথে একটি সহজ কাজ। আপনার কোড প্রতিটি চালানোর জন্য একটি টাইমার তৈরি করা প্রয়োজন এক্স সেকেন্ড নতুন কোড লেখার পরিবর্তে, সবচেয়ে সহজ কাজ হল পরবর্তী ইমেজ বাটনে একটি 'ক্লিক' অনুকরণ করা, এবং বিদ্যমান কোডটিকে সমস্ত কাজ করতে দিন।

আপনার প্রয়োজনীয় নতুন জাভাস্ক্রিপ্ট এখানে - এর পরে এটি যোগ করুন চিত্র হ্রাস ফাংশন:

window.setInterval(function() {
$('#previous').click();
}, 2500);

এখানে খুব বেশি কিছু হচ্ছে না। দ্য window.setInterval পদ্ধতিটি নিয়মিতভাবে একটি টুকরো কোড চালাবে, যেমনটি শেষে নির্দিষ্ট সময় দ্বারা সংজ্ঞায়িত করা হয়েছে। সময় 2500 (মিলিসেকেন্ডে) মানে এই স্লাইডশো প্রতি 2.5 সেকেন্ডে এগিয়ে যাবে। একটি ছোট সংখ্যা মানে প্রতিটি ছবি দ্রুত গতিতে এগিয়ে যাবে। দ্য ক্লিক পদ্ধতিটি কোড চালানোর জন্য বোতামগুলিকে ট্রিগার করে যেন ব্যবহারকারী তাদের মাউস দিয়ে বোতামটি ক্লিক করেছে।

আপনি যদি আপনার পরবর্তী জাভাস্ক্রিপ্ট চ্যালেঞ্জের জন্য প্রস্তুত থাকেন, তাহলে GatsbyJS এর ​​মত একটি স্ট্যাটিক ওয়েবসাইট নির্মাতা, অথবা Vue এর মত একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক দিয়ে একটি ওয়েবসাইট তৈরির চেষ্টা করুন। আপনি যদি রুবি শিক্ষার্থী হন, জেকিলও একটি বিকল্প। জেকিল এবং গ্যাটসবিজেএস একে অপরের বিরুদ্ধে কীভাবে কাজ করে তা এখানে।

ইমেজ ক্রেডিট: Shutterstock.com এর মাধ্যমে থারানাত সর্দশ্রী

শেয়ার করুন শেয়ার করুন টুইট ইমেইল 8 টি সেরা ওয়েবসাইট বিনামূল্যে অডিওবুক ডাউনলোড করার জন্য

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

পরবর্তী পড়ুন সম্পর্কিত বিষয়

• প্রোগ্রামিং
• জাভাস্ক্রিপ্ট
• ওয়েব ডিজাইন

লেখক সম্পর্কে জো কোবার্ন(136 নিবন্ধ প্রকাশিত)

জো যুক্তরাজ্যের লিংকন বিশ্ববিদ্যালয় থেকে কম্পিউটার বিজ্ঞানে স্নাতক। তিনি একজন পেশাদার সফটওয়্যার ডেভেলপার, এবং যখন তিনি ড্রোন উড়াচ্ছেন না বা সঙ্গীত লিখছেন না, তখন তাকে প্রায়ই ফটো তুলতে বা ভিডিও তৈরি করতে দেখা যায়।

জো কোবার্ন থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন