নিজস্ব সাইটের অনেক লোক স্লাইডার দেখতে চায় - এগুলি এমন ব্লক যা স্ক্রিনে একটি বিষয়বস্তুর উপাদান প্রদর্শন করে এবং একটি নির্দিষ্ট সময়ের পরে এই সামগ্রীটিকে অন্যটিতে পরিবর্তন করে৷ স্বাভাবিকভাবেই, প্রতিটি ওয়েব ডেভেলপার স্বাধীনভাবে HTML, CSS এবং JavaScript ব্যবহার করে একটি স্লাইডার তৈরি করতে সক্ষম, কিন্তু এটি সর্বদা অর্থবহ নয়। ইন্টারনেটে বেশ কয়েকটি রেডিমেড সমাধান থাকা সত্ত্বেও আপনি অনেক সময় ব্যয় করবেন যা আপনার জীবনকে আরও সহজ করে তোলে এবং আপনার সাইটটিকে আরও আকর্ষণীয় করে তোলে। এই নিবন্ধটি আউল ক্যারোসেল নামক এই সমাধানগুলির একটিতে ফোকাস করবে। এই স্লাইডার সেট আপ করা অবিশ্বাস্যভাবে সহজ, তাই এমনকি একজন শিক্ষানবিস এটি পরিচালনা করতে পারে। এখন আপনি শিখবেন এই স্লাইডারটি কী, সেইসাথে অন্যান্য গুরুত্বপূর্ণ বিবরণ। আউল ক্যারোজেল সেট আপ করা একটি ধাপে ধাপে প্রক্রিয়া, তাই আপনার এই উপাদানটি শুধুমাত্র ক্রমানুসারে অধ্যয়ন করা উচিত।
এটি কী এবং কেন আপনি এই বিশেষ স্লাইডারটি বেছে নেবেন?
আউল ক্যারোজেল, যার কনফিগারেশনটি এই নিবন্ধে আলোচনা করা হবে, এটি একটি খুব কার্যকর প্লাগইন যা আপনার পৃষ্ঠায় একটি সুন্দর এবং সুবিধাজনক স্লাইডার যোগ করে, যা সাইটে আপনার কাজকে ব্যাপকভাবে সহজতর করবে,অনেক সময়, প্রচেষ্টা এবং অর্থ সাশ্রয়। এই বিশেষ প্লাগইনের সুবিধা কী, কারণ ওয়েবে প্রচুর স্লাইডার রয়েছে? আসল বিষয়টি হ'ল এই স্লাইডারটি আপনাকে কয়েক ডজন কাস্টমাইজেশন বিকল্প সরবরাহ করে, যা আপনাকে আপনার পৃষ্ঠাটিকে অনন্য এবং অনবদ্য করতে দেয়। এটি একটি প্রতিক্রিয়াশীল প্লাগইন যা সমস্ত ব্রাউজার সংস্করণে কাজ করবে এবং সহজেই ওয়ার্ডপ্রেস এবং অন্যান্য জনপ্রিয় CMS এর সাথে সংযুক্ত হতে পারে। সাধারণভাবে, এই স্লাইডারটির অনেক সুবিধা রয়েছে, তাই আপনার অবশ্যই এটির পক্ষে একটি পছন্দ করা উচিত। যাইহোক, আপনি আউল ক্যারোজেল সেট আপ করা শুরু করার আগে, এই প্লাগইনটি এখনও লোড করা দরকার৷
ডাউনলোড
আউল ক্যারোজেল 2 সেট আপ করা সম্ভব নয় যদি আপনি এটিকে আপনার কম্পিউটারে ডাউনলোড না করে থাকেন এবং যেহেতু এটি একটি ধাপে ধাপে নির্দেশনা, তাই আপনাকে প্রথম থেকেই শুরু করা উচিত। সুতরাং, প্যাকেজ ম্যানেজার ব্যবহার করে প্রোগ্রামটি ডাউনলোড করা যেতে পারে, তবে এগুলি উন্নত বিকাশকারী সরঞ্জাম, তাই এখানে আমরা আপনাকে বলব যে কীভাবে এই প্লাগইনটি স্ট্যান্ডার্ড উপায়ে পেতে হয়। আপনাকে প্লাগইনটির অফিসিয়াল ওয়েবসাইটে যেতে হবে এবং এর সর্বশেষ সংস্করণটি ডাউনলোড করতে হবে। এর পরে, সমস্ত ডাউনলোড করা ফাইলগুলি অবশ্যই আপনার সাইটের ডিরেক্টরিতে স্থানান্তর করতে হবে, একটি সুবিধাজনক ফোল্ডার প্রস্তুত করে, যার নাম প্লাগইনটির মতোই। মনে রাখবেন যে এই প্লাগইনটি jQuery এর সাথে বান্ডিল করা হয়েছে, তাই আপনার সেই লাইব্রেরিটিও উপলব্ধ থাকতে হবে। ঠিক আছে, একবার আপনি এই প্লাগইনটি ডাউনলোড করলে, আপনাকে পরবর্তী ধাপের যত্ন নিতে হবে যা আউল ক্যারোজেল স্লাইডার 2 সেট আপ করছে।
CSS
BOwl Carousel 1.3 সেটিংস নতুন সংস্করণ 2 এর মতো প্রায় একই থাকে, শুধুমাত্র নতুন বৈশিষ্ট্য যোগ করা হয়েছে। যাইহোক, প্রাথমিক তথ্য একই হবে, আপনার নথিতে CSS যোগ করা থেকে শুরু করে। তাই প্রথম ধাপ হল লাইন যোগ করা। সে আপনাকে কি দেয়? এটি একটি স্ট্রিং যা স্লাইডার প্রদর্শন করতে সাইটে প্রয়োজনীয় শৈলী লোড করে। এখানে আপনি নিজেই ভিজ্যুয়াল প্রসেসিং করে শেষ করতে পারেন। যাইহোক, একটি আরো সুবিধাজনক এবং দ্রুত সমাধান আছে। আপনি একটি লাইনও যোগ করতে পারেন যা স্লাইডারের ডিফল্ট থিম লোড করে, এটিকে তাৎক্ষণিকভাবে ব্যবহারের জন্য প্রস্তুত করে। আপনি আপনার স্লাইডারটিকে আরও অনন্য এবং আলাদা করতে এবং আপনার সামগ্রীর জন্য আরও উপযুক্ত করতে কিছু শৈলী সম্পাদনা করতে পারেন৷ স্বাভাবিকভাবেই, রাশিয়ান ভাষায় আউল ক্যারোজেল সেটিংস খুব সুবিধাজনক হবে, তবে ওয়েবসাইট তৈরি করা প্রত্যেক ব্যক্তির বোঝা উচিত যে ইংরেজি জ্ঞান ছাড়া সে করতে পারে না।
JavaSpript সংযোগ
অবশ্যই, স্লাইডারটি JS ছাড়া কাজ করবে না, তাই আপনাকে প্রয়োজনীয় কোড সম্বলিত উপযুক্ত ফাইলটি অন্তর্ভুক্ত করার যত্ন নেওয়া উচিত। এটি করার জন্য, আপনাকে ডকুমেন্টেশন থেকে কোডের একটি লাইন সন্নিবেশ করতে হবে, তবে, একটি শর্ত অবশ্যই পূরণ করতে হবে। সবাই জানে যে JS হল একটি প্রোগ্রামিং ভাষা যা সমস্ত কমান্ডকে ক্রমানুসারে কার্যকর করে, তাই এই ক্ষেত্রে আপনার নথিতে jQuery লাইব্রেরি যোগ করার লাইনের পরে কোডের এই লাইনটি যোগ করা উচিত। এই স্লাইডারের ক্ষেত্রে JS এর সাথে আরও, আপনার কিছু করার নেইপ্রয়োজন।
HTML কোডিং
আচ্ছা, আপনি স্লাইডারটি সংযুক্ত করেছেন, এখন এটি ডিজাইন এবং কাস্টমাইজ করার সময়। প্রথমত, আপনার পৃষ্ঠায় স্লাইডারটি প্রদর্শিত হওয়ার জন্য আপনাকে HTML কোড লিখতে হবে। এটি করার জন্য, আপনাকে একটি ধারক তৈরি করতে হবে যাতে স্লাইডগুলি থাকবে। এটি div ট্যাগ ব্যবহার করে করা যেতে পারে, যাকে পেঁচা-ক্যারোজেল ক্লাস বরাদ্দ করা প্রয়োজন। এই ক্লাসটি নিশ্চিত করে যে স্লাইডারের সাথে সম্পর্কিত সমস্ত শৈলী সক্রিয় করা হবে। আপনি অন্য ক্লাস লিখতে পারেন - পেঁচা-থিম। আপনি যদি ডিফল্ট ডিজাইন ব্যবহার করার সিদ্ধান্ত নেন বা আরও কাজের জন্য ভিত্তি হিসাবে স্লাইডারের স্ট্যান্ডার্ড সংস্করণ গ্রহণ করেন তবে এটি কার্যকর হবে৷
তারপর আপনাকে একটি ডিভ ট্যাগ সহ একটি পৃথক পাত্রে প্রতিটি স্লাইড যোগ করতে হবে। অবশ্যই, আপনি অন্যান্য ট্যাগ ব্যবহার করতে পারেন, তবে এই ট্যাগটি স্লাইডারের জন্য সেরা৷
কল প্লাগইন
এবং আপনার সাইটে একটি রেডিমেড স্লাইডার রাখার জন্য আপনাকে যা করতে হবে তা হল কোডের এই ব্লকটি ব্যবহার করা:
$(নথি) প্রস্তুত(ফাংশন(){
$(."owl-carousel").owlCarousel();
});
এটি নিশ্চিত করে যে স্লাইডারটি কাজ করা শুরু করে, যেমন আপনার পৃষ্ঠা লোড হলে বিষয়বস্তুর মাধ্যমে স্ক্রোল করুন। একই কোড দিয়ে, আপনি ওয়ার্ডপ্রেসের সাথে আউল ক্যারোসেল সংযোগ করতে পারেন। এই প্লাগইনের সেটিংস অনেক এবং বৈচিত্রপূর্ণ, এবং এখন আপনি সবচেয়ে গুরুত্বপূর্ণ পয়েন্ট সম্পর্কে শিখবেন।
স্লাইডারের চেহারা এবং কার্যকারিতা সেট করা
তাহলে আপনার স্লাইডার কাস্টমাইজ করতে আপনি কোন কমান্ড ব্যবহার করতে পারেন? প্রথমত, আপনাকে আইটেম কমান্ডটি মনে রাখতে হবে, কারণ এটি দিয়ে আপনি আপনার স্লাইডারে একটি নির্দিষ্ট সংখ্যক স্লাইড সেট করতে পারেন। লুপ কমান্ড আপনাকে স্লাইডারটি লুপ করতে বা শেষ উপাদানটিতে স্ক্রলিং বন্ধ করতে হবে তা চয়ন করার অনুমতি দেবে। এছাড়াও ড্র্যাগ কমান্ড রয়েছে, যাতে মাউস এবং টাচের মতো বেশ কয়েকটি বিকল্প রয়েছে। প্রথম ক্ষেত্রে, আপনি এটি তৈরি করতে পারেন যাতে আপনার স্লাইডারের উপাদানগুলিকে মাউস ধরে রেখে সোয়াইপ করা যায় এবং দ্বিতীয় ক্ষেত্রে, একটি স্পর্শের সাহায্যে (এই কমান্ডটি মোবাইল ডিভাইসের জন্য উপযুক্ত)। আরেকটি গুরুত্বপূর্ণ কমান্ড হল nav, যা নেভিগেশন তীর প্রদর্শন সক্ষম করে। এর সাথে, আপনি নেভিগেশন বোতামগুলিতে লেবেল যুক্ত করতে navText কমান্ড ব্যবহার করতে পারেন। এছাড়াও, আপনার অটোপ্লে কমান্ড সম্পর্কে ভুলে যাওয়া উচিত নয়, যা আপনাকে পৃষ্ঠাটি লোড করার সময় আপনার স্লাইডারের স্লাইডগুলিকে বাঁকানোর স্বয়ংক্রিয় সূচনা সক্ষম এবং অক্ষম করতে দেয়৷ এই কমান্ডের সাহায্যে, আপনি অটোপ্লেটাইমআউটও ব্যবহার করতে পারেন, যার জন্য আপনি মিলিসেকেন্ডে একটি নির্দিষ্ট মান সেট করতে পারেন, যা প্রতিটি স্লাইডের স্বয়ংক্রিয় মোড়ের মধ্যে সময় নির্ধারণ করবে।
আপনি যদি রেসপন্সিভ ওয়েব ডিজাইন ব্যবহার করেন, অর্থাৎ কোন ডিভাইসে এটি দেখা হয় তার উপর নির্ভর করে আপনার পেজের ডিজাইন স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়, তাহলে আপনাকে অবশ্যই রেসপন্সিভ কমান্ডটি মনে রাখতে হবে, যা আপনাকে স্লাইডের সংখ্যা সেট করতে দেয়। পৃষ্ঠাটি দেখা হচ্ছে স্ক্রিনের প্রস্থের উপর নির্ভর করে প্রদর্শন করতে।
