ভ্যানিলা জেএস-এ স্ক্র্যাচ থেকে ক্যারোসেল কীভাবে তৈরি করবেন।

আনস্প্ল্যাশ-এ জাভি ক্যাবেরাার ছবি

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

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

ক্যারোসেল চ্যালেঞ্জ

মিশন পরিষ্কার।

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

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

যদি আমরা এখন পর্যাপ্ত কথা বলি তবে আসুন জেনে নেওয়া যাক।

কোনও কোড লেখার আগে আমাদের সিদ্ধান্ত নেওয়া দরকার যে এইচটিএমএল, সিএসএস এবং জেএস কীভাবে একসাথে কাজ করবে।

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

এই উদাহরণটি স্ট্রাকচার্ড এইচটিএমএল, সিএসএস 3 ট্রানজিশন এবং ইন্টারেক্টিভিটি ব্যবহার করে যা জেএস দ্বারা নিয়ন্ত্রিত হয়।

এইচটিএমএল: কাঠামো

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

আমাদের মূল কাঠামোটি এখানে:

    
    
    
    
    
      
    
  

ক্যারোসেল প্যাকেজিং দিয়ে শুরু করে, আমরা আমাদের ক্যারোসেলের আকার নির্ধারণ করতে এবং এতে কোনও ওভারফ্লো বিষয়বস্তু আড়াল করতে ব্যবহার করি।

ক্যারোসেল আমাদের সমস্ত আইটেম যেমন ছবি এবং নেভিগেশন বোতাম ধারণ করে।

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

কারাউসেল_বাটনগুলি পতাকা - এনেক্সট এবং --প্রিভ সহ যাতে আমরা তাদের প্রত্যেককে তাদের নিজস্ব ক্লিক ইভেন্ট নির্ধারণ করতে পারি। আমার শ্রেণি নামকরণের সম্মেলনে যারা আগ্রহী তাদের জন্য আমি বিইএম পদ্ধতিটি অনুসরণ করি।

এইচটিএমএল সম্পন্ন হয়েছে। পরবর্তী, সিএসএস

সিএসএস: শৈলী এবং ট্রানজিশন

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

এই বিষয়টি মাথায় রেখে, এই সিএসএসটি কারাউসেলের এক-কলামের দৃশ্য হতে চলেছে এবং ব্রেভিটির জন্য আমি প্রস্তুতকারক উপসর্গ (উদাঃ-ওয়েবকিট-) বাদ দেব।

আমাদের এটি করা যাক।

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

.ক্যারোসেল ওয়াইন্ডার {ওভারফ্লো লুকানো; প্রস্থ: 90%; }

বাক্স সাইজিং প্রোপার্টিটিতে আমরা সীমানা-বাক্সও প্রয়োগ করতে চাই যাতে কোনও উপাদান এবং সামগ্রীর সামগ্রিক প্রস্থ এবং উচ্চতার মধ্যে সীমানা অন্তর্ভুক্ত থাকে।

.ক্যারোসেল ওয়াইন্ডার * {বক্সের আকার: বর্ডার বক্স; }

আমরা আমাদের ক্যারোলের উপাদানগুলিকে স্থানান্তর করতে রূপান্তর সম্পত্তিটি ব্যবহার করতে যাচ্ছি। সুতরাং, ট্রুপফর্ম স্টাইলটি ডিপি 3 ডি তে সেট করা নিশ্চিত করবে যে আমাদের নেস্টেড উপাদানগুলি 3D স্পেসে যথাযথভাবে রেন্ডার করবে।

.কারসেল {রূপান্তর-শৈলী: সংরক্ষণ -3 ডি; }

ডিফল্টরূপে, স্ক্রিপ্ট কারাউসেলটি শুরু না করা পর্যন্ত আমরা সমস্ত আইটেম আড়াল করি। সহজ অবস্থানের জন্য, উপাদানগুলি একেবারে অবস্থানযুক্ত এবং এর প্রতিক্রিয়া 100% থাকে। আমাদের বিষয়বস্তু কারাউসেলের উচ্চতা নির্ধারণ করবে এবং রূপান্তরের বৈশিষ্ট্যটি কারাউসেলটি অ্যানিমেট করার জন্য আমাদের যাদু হয়ে থাকবে।

.carousel__ ফটো {অস্বচ্ছতা: 0; অবস্থান: পরম; শীর্ষ: 0; প্রস্থ: 100%; প্রান্ত: গাড়ী; সজ্জিত: 1 মিম 4 ফর্ম; জেড সূচক: 100; ট্রানজিশন: ট্রান্সফর্মেশন .5 এস, অপটিসিটি .5 এস, জেড-ইনডেক্স .5 এস; }

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

.carousel__photo.initial, .carousel__photo.active {অস্বচ্ছতা: 1; অবস্থান: আপেক্ষিক; জেড সূচক: 900; }

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

.carousel__photo.prev, .carousel__photo.next {জেড সূচক: 800; }
.carousel__photo.prev {রূপান্তর: অনুবাদ অনুবাদ (-100%); / * 'পূর্ব' আইটেমটি বামে সরান * /}
.carousel__photo.next {রূপান্তর: অনুবাদ অনুবাদ (100%); / * পরবর্তী উপাদানটি ডান দিকে সরান * /}

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

.carousel__button - prev, .carousel__button - next {অবস্থান: পরম; উপরে: 50%; প্রস্থ: 3 মিম; উচ্চতা: 3 রে; পটভূমির রঙ: # এফএফএফ; রূপান্তর: অনুবাদ Y (-50%); প্রান্ত ব্যাসার্ধ: 50%; কার্সার: পয়েন্টার; জেড সূচক: 1001; / * সব কিছুর উপরে বসুন * / প্রান্ত: 1px কঠিন কালো; }
.ক্যারোসেল__বাটন - পূর্ব {বাম: 0; }
.ক্যারোসেল__বাটন - পরবর্তী {ডান: 0; }
.carousel__button - prev :: after, .carousel__button - পরের :: পরে {সামগ্রী: ""; অবস্থান: পরম; প্রস্থ: 10px; উচ্চতা: 10px; উপরে: 50%; বাম: 54%; ডান মার্জিন: 2px অবিচ্ছিন্ন কালো; নিম্ন মার্জিন: 2px অবিচ্ছিন্ন কালো; রূপান্তর: অনুবাদ (-50%, -50%) ঘোরান (135deg); }
.ক্যারোসেল__বাটন - পরবর্তী :: পরে {বাম: 47%; রূপান্তর: অনুবাদ (-50%, -50%) ঘোরান (-45 ডিগ্রি); }
আপনি যদি অংশ নিয়ে থাকেন তবে আপনার ক্যারোসেলটি খুব আলাদা নয়।

জাভাস্ক্রিপ্ট: এটি কাজ করতে!

যদি আপনি এটি এ পর্যন্ত তৈরি করে থাকেন তবে ভাল কাজ করেছেন এবং আপনাকে ধন্যবাদ। সত্যিই। আপনাকে অনেক ধন্যবাদ. তুমিই শ্রেষ্ঠ. ❤

আমাদের কাঠামো আছে, আমরা এটি দেখতে চাই এমনভাবে দেখিয়েছি, রূপান্তরগুলি যে উত্থিত হয় with এখন আমাদের কেবল তাদের কাজ করতে হবে।

আমরা কোডিং শুরু করার আগে এটি সন্ধানের সময়।

  1. আসল উপাদানটি সন্ধান করে এবং প্রতিবেশী উপাদানগুলিতে .rev এবং .Nxt ক্লাস প্রয়োগ করে আপনাকে কারাউসেলটি শুরু করতে হবে।
  2. তারপরে আমরা আমাদের নেভিগেশন বোতামগুলিতে ক্লিক ইভেন্টগুলি যুক্ত করতে চাই।
  3. ক্লিক ইভেন্টগুলি কোনও ফাংশন ছাড়া কিছুই নয়। আমরা প্রতিটি দিক পরিচালনা করতে দুটি ফাংশন লিখব।
  4. একবার যখন আমরা জানতে পারি যে কোনও ব্যবহারকারী ন্যাভিগেট করতে চায়, তখন চলুন যে কারাউসটিকে সেই দিকে চালিত করতে অন্য একটি ফাংশন লিখি।
  5. ব্যবহারকারীদের অত্যধিক বোতামে ক্লিক করা থেকে বাঁচতে, কারোসেল অ্যানিমেট করার সময় আমরা ইন্টারঅ্যাক্টিভিটি বন্ধ করব এবং এটি শেষ হয়ে গেলে এটি আবার চালু করব।
  6. পরিশেষে, আমরা একটি ক্রিয়াকলাপে এই সমস্তটি পরিচালনা করতে চাই যা CSS3 রূপান্তরগুলি ট্রিগার করতে নতুন উপাদানগুলির সাথে কোন উপাদানগুলিকে আপডেট করতে হবে এবং আপডেট করতে হবে তা নির্ধারণ করে আমাদের ক্যারোলের চারপাশের উপাদানগুলিকে সরিয়ে দেয়।

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

! (ফাংশন (ডি) {
// সমস্ত কোড এখানে প্রবেশ করা হবে। আমরা 'ডকুমেন্ট' এর নাম বদলে 'ডি' করেছি।
document (দলিল);

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

var itemClassName = "ক্যারোসেল__ ফটো"; আইটেম = d.getElementsByClassName (আইটেমক্লাসনাম), মোট আইটেমস = আইটেমসামগ্রী, স্লাইড = 0, সরানো = সত্য;

এই পরবর্তী দুটি ফাংশন প্রাথমিক ক্লাস সেট করে এবং আমাদের ইভেন্ট শ্রোতাদের নেভিগেশন বোতামগুলিতে যুক্ত করে।

// সেট শ্রেণীর ফাংশন setInitialClass () {// পূর্ববর্তী, বর্তমান এবং পরবর্তী উপাদানগুলিকে লক্ষ্য করে // এটি ধরে নেয় যে সেখানে কমপক্ষে তিনটি উপাদান রয়েছে।
আইটেমস [টোটাল আইটেম - 1] .ক্লাসলিস্ট.এডডি ("পূর্ব"); আইটেমস [0] .classList.add ("সক্রিয়"); আইটেমস [1] .classList.add ("পরবর্তী"); }
// ইভেন্ট শ্রোতাদের ফাংশন সেট করুনএন্টিলেস্টেনারস () next var Next = d.getElementsByClassName ('carousel__button - next') [0], prev = d.getElementsByClassName ('carousel__button - prev') [0];
Next.addEventListener ('ক্লিক করুন', মুভনেক্সট); prev.addEventListener ('ক্লিক করুন', মুভপ্রেভ); }

আমরা মুভনেক্সট এবং মুভপ্রেভকে ক্লিক ইভেন্টে আবদ্ধ করব যাতে আমরা এই ফাংশনগুলি আরও ভালভাবে তৈরি করতে পারি। এই ফাংশনগুলি বর্তমান স্লাইড নম্বরটি পরীক্ষা করে এবং এটিকে প্রথম বা শেষ উপাদানটিতে বৃদ্ধি, হ্রাস বা সেট করে।

// পরবর্তী নেভিগেশন হ্যান্ডলার ফাংশন মুভনেক্সট () {
// আপনি যদি চলছেন কিনা তা পরীক্ষা করুন! (চলমান) {
// এটি যদি সর্বশেষ স্লাইড হয় তবে এটিকে 0 এ পুনরায় সেট করুন, অন্যথায় +1 এ (স্লাইড === (মোট আইটেম - 1)) ide স্লাইড = 0; } অন্য {স্লাইড ++; }
// হালনাগাদ কারাউসেল আপডেট করা স্লাইড মুভ্যারোসেলটোতে (স্লাইড); }}
// পূর্ববর্তী নেভিগেশন হ্যান্ডলার ফাংশন মুভপ্রেভ () {
// আপনি যদি চলছেন কিনা তা পরীক্ষা করুন (! চলমান) {
// এটি যদি প্রথম স্লাইড হয় তবে এটিকে সর্বশেষ স্লাইড করুন, অন্যথায় -1 (স্লাইড === 0) {স্লাইড = (মোট আইটেম - 1); } অন্য {স্লাইড--; } // হালনাগাদ স্লাইডে সরানো কারাউসেল সরানো কারাউসেলটো (স্লাইড); }}

উজ্জ্বল। যাতে আমরা কোডটি চালাতে পারি, চলন্ত চলকটি পরিচালনা করতে একটি সামান্য যুক্তি লিখি, যা ট্রিগার হওয়ার সময় সত্যতে সেট করা হয় এবং ট্রানজিশনটি সম্পূর্ণ হওয়ার পরে মিথ্যাতে ফিরে আসে।

ফাংশন অক্ষমযুক্তকরণ () {
// আমাদের রূপান্তর হিসাবে একই সময়কালের জন্য 'চলন্ত' সত্যে সেট করুন। // (0.5 এস = 500 এমএস) সরানো = সত্য;
// সেটটাইমআউট নির্দিষ্ট সময় সেটটাইমআউট (ফাংশন () {মুভি = ভুল}, 500) এর পরে একবার এটির কার্য সম্পাদন করে; }

পুরো কারাউসেলটি পরিচালনা করে এমন প্রধান ফাংশনটি আর্গুমেন্ট হিসাবে একটি স্লাইড নম্বর ব্যবহার করে মুভক্যারোসেলটো (স্লাইড) এ। এটি আমাদের বৃহত্তম বৈশিষ্ট্য, তাই আমি কোডটিতে মন্তব্য করেছি।

ফাংশন মুভক্যারোসেলটো (স্লাইড) {
// কারাউসেলটি চলমান কিনা তা পরীক্ষা করুন। যদি তা না হয় তবে (! চলন্ত) to এ একটি মিথস্ক্রিয়া রেখে দিন
// অস্থায়ীভাবে ইন্টারঅ্যাক্টিভিটি অক্ষম করুন অন্তর্ভুক্তি ();
// "নতুন" সাথে "পুরানো" সংলগ্ন স্লাইডগুলি আপডেট করুন নতুন নতুন প্রেরিভ = স্লাইড - 1, নতুননেক্সট = স্লাইড + 1, ওল্ডপ্রিসিভ = স্লাইড - 2, ওল্ড নেক্সট = স্লাইড + 2;
// যদি কারাউসেলটিতে তিনটির বেশি আইটেম থাকে তবে পরীক্ষা করুন ((মোটামুটি - 1)> 3) {
// নতুন স্লাইডগুলি সীমা ছাড়িয়ে কিনা তা যাচাই করে আপডেট করে (নতুন প্রিরিয়াস <= 0) {ওল্ডপ্রিসিভ = (টোটাল আইটেম - 1); if অন্যথায় যদি (newNext> = (totalItems - 1)) {oldNext = 0; }
// স্লাইডটি শুরুর / শেষের দিকে কিনা কিনা তা পরীক্ষা করে আপডেট করে (স্লাইড === 0) {নতুনপ্রিরিয়াল = (টোটাল আইটেম - 1); oldPreLive = (মোট আইটেম - 2); oldNext = (স্লাইড + 1); if অন্যথায় যদি (স্লাইড === (টোটাল আইটেম -১)) P নতুন প্রিপ্রিস = (স্লাইড - 1); newNext = 0; oldNext = 1; }
// এখন আমরা কোথায় আছি এবং কোথায় যাচ্ছি তা খুঁজে পেয়েছি। // ক্লাস যুক্ত করা / অপসারণ স্থানান্তরগুলি ট্রিগার করবে।
// পুরানো পরবর্তী / পূর্ববর্তী উপাদানগুলিকে স্ট্যান্ডার্ড শ্রেণীর আইটেমগুলিতে পুনরায় সেট করুন [ওল্ডপ্রিরিজ] .className = আইটেমক্লাসনাম; আইটেমস [oldNext] .className = আইটেম ক্লাসনাম;
// নতুন শ্রেণীর আইটেম যুক্ত করুন [newPreLive]। className = আইটেম ক্লাসনাম + "পূর্ব"; আইটেম [স্লাইড] .className = আইটেম ক্লাসনাম + "সক্রিয়"; আইটেমস [newNext] .className = আইটেম ক্লাসনাম + "পরবর্তী"; }}}

আমরা প্রায় সেখানে! একটি চূড়ান্ত ফাংশন রয়েছে যা আমাদের সম্পাদন করা দরকার যা আমরা প্রতিটি কাজের জন্য কল করতে যাচ্ছি।

ফাংশন initCarousel () {setInitialClass (); setEventListeners ();
// সেটটি মুভিং এ মিথ্যাতে কারোসেল ইন্টারেক্টিভ মুভি তৈরি করতে = মিথ্যা; }

অবশেষে, নীচে এটি যুক্ত করে আর্টকারোসেল () কল করুন:

// বৃষ্টি যাক ইনিক্রোসেল ();

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

আমি আশা করি আপনি আমার প্রথম নিবন্ধটি উপভোগ করেছেন। আপনি যদি এটি দরকারী মনে করেন, দয়া করে আমাদের জানান। আপনি যদি সুরে থাকতে চান তবে আপনি আমাকে ইনস্টাগ্রামে অনুসরণ করতে পারেন।