লেখক থেকে:স্ক্রলিং ছাড়াই দৃশ্যমান ওয়েব পৃষ্ঠাগুলির অংশের অনুমিত "মৃত্যু" সম্পর্কে গুজব থাকা সত্ত্বেও, একটি ভাল স্লাইডারের প্রয়োজনীয়তা অদৃশ্য হয়ে যায়নি। আসুন এক সেকেন্ডের জন্য সৎ হতে দিন - স্লাইডারগুলি মজাদার। উপরন্তু, অন্য কিছুই, সরানো বিষয়বস্তুর বিপরীতে, ব্যবহারকারীর মধ্যে একটি "বাহ" প্রভাব সৃষ্টি করে। সমস্ত স্লাইডার হল বেশ কয়েকটি স্লাইডের একটি সেট যা একে অপরকে প্রতিস্থাপন করে এবং এটি অত্যন্ত গুরুত্বপূর্ণ যে স্লাইডার কোডটি যতটা সম্ভব হালকা। এই ধরনের ক্ষেত্রে jQuery আমাদের সাহায্য করবে।
Envato Market থেকে 20টি jQuery স্লাইডার দেখুন এবং আপনি বুঝতে পারবেন যে স্লাইডারগুলি কেবলমাত্র একটি ব্লকের চেয়ে বেশি নয় যা তাদের মাধ্যমে মসৃণভাবে প্রবাহিত হয়।
1. RoyalSlider – jQuery ব্যবহার করে টাচস্ক্রিন ইমেজ গ্যালারি
আজকাল, একটি প্রতিক্রিয়াশীল স্লাইডার যা টাচস্ক্রিন-বান্ধব মানে আগের চেয়ে অনেক বেশি। RoyalSlider উভয় বৈশিষ্ট্য একত্রিত করে: প্রতিক্রিয়াশীলতা এবং স্পর্শ পর্দা কার্যকারিতা। ভাল পছন্দ, যেহেতু গ্যালারিটি HTML5 এবং CSS3 এ লেখা আছে।
কিছু আকর্ষণীয় বৈশিষ্ট্য:
কিভাবে নিজেই একটি ওয়েবসাইট তৈরি করবেন?
এসইও অপ্টিমাইজেশান
অত্যন্ত কাস্টমাইজযোগ্য
10 টিরও বেশি স্টার্টার টেমপ্লেট
CSS3 ট্রানজিশনের জন্য একটি ফলব্যাক আছে
আমার মতে, সবচেয়ে ভালো বৈশিষ্ট্য হল "মডুলার স্ক্রিপ্ট আর্কিটেকচার", যা আপনাকে প্রধান JS ফাইল থেকে অপ্রয়োজনীয় জিনিসগুলি বাদ দিতে দেয়, যার ফলে ওজন কম হয়। RoyalSlider, JQuery-এর একটি টাচস্ক্রিন ইমেজ গ্যালারি, একটি শক্তিশালী জাভাস্ক্রিপ্ট স্লাইডার যা যেকোনো বিকাশকারীর টুলকিটে যোগ করা উচিত।
2. স্লাইডার বিপ্লব প্রতিক্রিয়াশীল jQuery প্লাগইন
স্লাইডার দিয়ে "বিপ্লবী" কিছু করা এত সহজ নয়। যখন স্লাইডারের কথা আসে, তখন আপনি সেগুলিতে যোগ করতে পারেন এমন অনেক বৈশিষ্ট্য রয়েছে। যাইহোক, স্লাইডার বিপ্লব সত্যিই একটি ভাল চেষ্টা। jQuery স্লাইডারগুলির মধ্যে, এই উদাহরণটি আপনার সমস্ত সম্ভাব্য প্রয়োজনীয়তা পূরণ করে।
স্লাইডার বৈশিষ্ট্যগুলির তালিকাটি এত বড়, তাই আমি শুধুমাত্র সবচেয়ে ভাল তালিকা করব:
প্যারালাক্স প্রভাব এবং কাস্টম অ্যানিমেশন
লিঙ্ক সহ সীমাহীন সংখ্যক স্তর এবং স্লাইড
ব্যবহার করার জন্য প্রস্তুত, গভীরভাবে কাস্টমাইজযোগ্য শৈলী
এবং আরো অনেক কিছু
একটি ছবি, এমবেডেড ভিডিও প্লেয়ার এবং লিঙ্ক যোগ করার ক্ষমতা সামাজিক নেটওয়ার্কস্লাইডার বিপ্লবকে ওয়েবে সবচেয়ে নমনীয় এবং কাস্টমাইজযোগ্য বিকল্পগুলির মধ্যে একটি করে তোলে৷
3. লেয়ারস্লাইডার অভিযোজিত jQuery স্লাইডার প্লাগইন
"লেয়ার স্লাইডার অভিযোজিত jQuery স্লাইডার প্লাগইন" নামটি এই স্লাইডারটিকে সত্যই মূল্যায়ন করতে পারে না।
স্লাইডের মধ্যে 200+ 2D এবং 3D ট্রানজিশন যে কারও মাথা ঘুরিয়ে দেবে।
কয়েকটি উল্লেখযোগ্য বৈশিষ্ট্য:
13টি স্কিন এবং 3টি মেনু প্রকার
স্লাইডারের উপরে একটি স্থির চিত্র স্থাপন করার ক্ষমতা
এবং jQuery ফলব্যাক
এবং আরো অনেক কিছু
পূর্ববর্তী স্লাইডারের মতো, আপনি প্রায় যেকোনো সামগ্রী, এমনকি HTML5 আবাসিক মাল্টিমিডিয়া সামগ্রী যোগ করতে পারেন৷ লেয়ারস্লাইডার স্লাইডারকে প্রাণবন্ত করে এবং খুব সুন্দর।
4. jQuery ব্যানার রোটেটর / স্লাইডশো
jQuery ব্যানার রোটেটর / স্লাইডশো হল একটি মোটামুটি সহজ স্লাইডার যা মূল কার্যকারিতা ত্যাগ করে না।
সম্ভাবনা:
টুলটিপ, পাঠ্য সন্নিবেশ, ইত্যাদি
প্রিভিউ এবং উপাদান দেখার জন্য বিভিন্ন বিকল্প
একটি স্লাইডার বা সমস্ত জন্য বিলম্ব সঙ্গে টাইমার
সমস্ত স্লাইডের জন্য একাধিক রূপান্তর বা পৃথকভাবে প্রতিটির জন্য ভিন্ন রূপান্তর
jQuery ব্যানার রোটেটর / স্লাইডশো, অন্যান্য JQuery স্লাইডারের তুলনায়, শুধুমাত্র মৌলিক ক্ষমতা আছে, কিন্তু আপনি এটি সম্পর্কে ভুলে যাবেন না।
5. অল ইন ওয়ান স্লাইডার - প্রতিক্রিয়াশীল jQuery স্লাইডার প্লাগইন
ওয়েবে প্রদর্শিত যে কোনো স্লাইডারের নিজস্ব অনন্য দৃষ্টি রয়েছে এবং এর ক্ষেত্রে কিছু সমস্যা সমাধান করে। কিন্তু এই এক না. অল ইন ওয়ান স্লাইডারকে "সমস্ত অন্তর্ভুক্ত" বলা যেতে পারে।
আমি মনে করি বেশিরভাগ ওয়েব ডেভেলপার এবং ডিজাইনারদের একটি প্রমাণিত সমাধান আছে, কিন্তু তারা সবসময় নতুন কিছু খুঁজছেন। এবং এই "নতুন কিছু" এর মধ্যে রয়েছে:
ব্যানার রোটেটর
পূর্বরূপ সহ ব্যানার
প্লেলিস্ট সহ ব্যানার
বিষয়বস্তু স্লাইডার
ক্যারোসেল
সমস্ত স্লাইডার প্রকারগুলি jQuery স্লাইডারগুলির জন্য প্রয়োজনীয় কার্যকারিতাগুলির বেশিরভাগ সমর্থন করে, যদি না হয়। অল ইন ওয়ান স্লাইডার কি আপনার সব-ই অন্তর্ভুক্ত হবে?
6. UnoSlider - অভিযোজিত টাচস্ক্রিন স্লাইডার
যদি আপনার স্লাইডার প্রতিক্রিয়াশীল না হয় এবং টাচ স্ক্রিন সমর্থন না করে, তাহলে আপনার কাছে ভুল স্লাইডার আছে৷ UnoSlider সঠিক।
এই স্লাইডারটি সরলতা এবং ফাংশনের একটি সমৃদ্ধ সেটের মধ্যে সূর্যের মধ্যে তার স্থান খুঁজে পেয়েছে। ফাংশন:
থিম সমর্থন
12টি রেডিমেড থিম
40টি রূপান্তর
IE6+ সমর্থন
ডিজাইন এবং শৈলীর উপর জোর দিয়ে সমস্ত বৈশিষ্ট্য, ইউনোস্লাইডারকে থিম যোগ করার ক্ষমতা সহ একটি চমৎকার বিষয়বস্তু স্লাইডার তৈরি করে।
7. মাস্টার স্লাইডার - jQuery টাচস্ক্রিন স্লাইডার
"একটি jQuery স্লাইডার তাদের সব শাসন করতে" খুঁজছেন? মাস্টার স্লাইডার চেষ্টা করুন - JQuery টাচস্ক্রিন স্লাইডার অধীনে বিভিন্ন আকারপর্দা...
ভাল ডিজাইনের ক্ষেত্রে, এই উদাহরণটি সেরাগুলির মধ্যে একটি:
25টিরও বেশি টেমপ্লেট
হার্ডওয়্যার ত্বরিত রূপান্তর
স্পর্শ এবং সোয়াইপ সমর্থন
এবং আরো অনেক কিছু
ইন্টারেক্টিভ ট্রানজিশন, অ্যানিমেটেড লেয়ার এবং হটস্পট অবশ্যই আপনার মনোযোগ আকর্ষণ করবে। মাস্টার স্লাইডার শিল্পের একটি কাজ।
8. TouchCarousel - jQuery কন্টেন্ট স্ক্রোলার এবং স্লাইডার
TouchCarousel বিনামূল্যে সমর্থন এবং আপডেট অফার করে. যাইহোক, এটি এই লাইটওয়েট jQuery ক্যারোজেল স্লাইডারের সমস্ত বৈশিষ্ট্য নয়।
যদি "টাচ" শব্দটি নামে থাকে, আপনি অনুমান করতে পারেন যে স্লাইডারটি সম্পূর্ণরূপে অভিযোজিত এবং স্পর্শ সমর্থন করে৷ অন্যান্য বৈশিষ্ট্য:
এসইও অপ্টিমাইজেশান
স্মার্ট অটোপ্লে
হার্ডওয়্যার ত্বরণ সহ CSS3 রূপান্তর
ফটোশপের জন্য কাস্টমাইজযোগ্য UI এবং 4টি স্কিন
TouchCarousel, স্লাইডগুলির অনন্য শারীরিক স্ক্রলিংয়ের কারণে, সম্পূর্ণ নতুন স্তরের সংবেদন নিয়ে আসে মোবাইল ডিভাইসওহ.
9. অ্যাডভান্সড স্লাইডার - jQuery XML স্লাইডার
jQuery স্লাইডার শুধুমাত্র ওয়েবসাইটেই ব্যবহার করা যাবে না। এগুলি ওয়েব অ্যাপ্লিকেশনগুলিতেও কার্যকর হতে পারে। উন্নত স্লাইডার আপনাকে এটি করতে দেয়।
এইচটিএমএল বা এক্সএমএল মার্কআপের সাথে, এই উন্নত স্লাইডার একটি স্থায়ী ছাপ তৈরি করে:
অ্যানিমেটেড লেয়ার এবং স্মার্ট ভিডিও
100+ রূপান্তর এবং 150+ কাস্টম বৈশিষ্ট্য
15টি স্লাইডার স্কিন, 7টি স্ক্রলবার স্কিন এবং অন্তর্নির্মিত লাইটবক্স সমর্থন
কীবোর্ড নেভিগেশন, স্পর্শ সমর্থন এবং সম্পূর্ণ কাস্টমাইজেশন
এবং আরো অনেক কিছু
তবে সবচেয়ে বেশি সেরা বৈশিষ্ট্যএই অ্যাডভান্সড স্লাইডার হল একটি jQuery XML স্লাইডার API যা স্লাইডারটিকে আপনার ওয়েব অ্যাপ্লিকেশনের জন্য একটি আদর্শ বিকল্প করে তোলে৷
10. jQuery স্লাইডার জুম ইন/আউট প্রভাব সম্পূর্ণরূপে প্রতিক্রিয়াশীল
সেই jQuery স্লাইডারগুলির মধ্যে একটি যা আপনি এর বৈশিষ্ট্যগুলি সম্পর্কে পড়া শুরু করার আগে আপনাকে একটি ডেমো দেখতে বাধ্য করবে৷ আপনি শুধু বুঝতে চান এই "জুম ইন/আউট প্রভাব" মানে কি।
জুম প্রভাবটি বেশ দুর্বল, তবে এটি চিত্রটিতে নিয়ন্ত্রণ এবং বাস্তব স্পর্শের অনুভূতি যোগ করে যখন বাকি স্লাইডারটি স্থির থাকে। স্লাইডারের বিশেষ বৈশিষ্ট্য:
CSS3 লেয়ার ট্রানজিশন
স্তরগুলির জন্য অ্যানিমেশন শেষ বিকল্প
স্থির প্রস্থ, পূর্ণ পর্দা এবং সম্পূর্ণ প্রস্থ বিকল্প
HTML এবং CSS ফরম্যাটিং সহ অ্যানিমেটেড টেক্সট
বেশির ভাগ স্লাইডার যতটা সম্ভব প্রভাব অন্তর্ভুক্ত করার চেষ্টা করে, কিন্তু jQuery স্লাইডার জুম ইন/আউট ইফেক্ট ফুললি রেসপন্সিভ শুধুমাত্র কেন বার্নস ইফেক্ট আছে, কিন্তু এটি ভালভাবে প্রয়োগ করা হয়েছে।
11. jQuery ক্যারোজেল বিবর্তন
উপরে উল্লিখিত অ্যাডভান্সড স্লাইডার - jQuery XML স্লাইডারের মতো, jQuery ক্যারোজেল ইভোলিউশনের নিজস্ব API রয়েছে যা কার্যকারিতা বাড়াতে বা স্লাইডারটিকে অন্য প্রকল্পে সংহত করতে ব্যবহার করা যেতে পারে।
কিভাবে নিজেই একটি ওয়েবসাইট তৈরি করবেন?
আপনার নিজের ওয়েবসাইট তৈরি করতে আজ কোন প্রযুক্তি এবং জ্ঞানের প্রয়োজন? নিবিড় এ খুঁজে বের করুন!
ছবি সহ, এইচটিএমএল মার্কআপ, YouTube এবং Vimeo ভিডিওগুলিও আপনি পাবেন:
এসইও অপ্টিমাইজেশান
9 ক্যারোজেল শৈলী
ছায়া এবং প্রতিফলন প্রভাব
ছবির আকার সামনে এবং পিছনে উভয় সামঞ্জস্য করা যেতে পারে
jQuery Carousel Evolution হল একটি সাধারণ ক্যারোজেল যার অনেকগুলি ব্যবহার রয়েছে৷
12. সেক্সি স্লাইডার
সেক্সি স্লাইডার আর আগের মত সেক্সি নেই। যাইহোক, বয়সের কারণে এই স্লাইডারটি বিশ্বস্ত।
স্লাইডারটি প্রথম নজরে খুব চিত্তাকর্ষক দেখায় না, তবে আপনি যদি এটি ভালভাবে কাস্টমাইজ করেন তবে এটি আপনার ডিজাইনে পুরোপুরি ফিট হবে। সম্ভাবনা:
অটোপ্লে স্লাইড
ছবির ক্যাপশন
ক্রমাগত স্লাইড প্লেব্যাক
6 রূপান্তর প্রভাব
সেক্সি স্লাইডার আপনার সম্পূর্ণ শক্তি এবং সম্ভাবনা আনলক করার জন্য অপেক্ষা করছে।
13. jQuery ইমেজ এবং কন্টেন্ট স্ক্রোলার w/ লাইটবক্স
এই সব মোবাইল প্রস্তুত ডিজাইন এবং সমর্থন সঙ্গে স্পর্শ পর্দাএকটি jQuery স্লাইডার দেখতে ভালো লাগলো যা ভুলে যায়নি ডেস্কটপ কম্পিউটার.
jQuery ইমেজ এবং কন্টেন্ট স্ক্রোলার w/ Lightbox কীবোর্ড ইনপুট এবং মাউস হুইল, সেইসাথে অন্যান্য বৈশিষ্ট্যগুলিকে সমর্থন করে:
অনুভূমিক এবং উল্লম্ব অভিযোজন
স্লাইডারের ভিতরে বা বাইরে পাঠ্য ক্যাপশন
এক সময়ে দৃশ্যমান একটি নির্দিষ্ট সংখ্যক স্লাইড সেট করার ক্ষমতা
ইনলাইন ইমেজ, ফ্ল্যাশ, iframe, Ajax এবং ইনলাইন বিষয়বস্তু
স্লাইডারটিতে একটি অন্তর্নির্মিত লাইটবক্সও রয়েছে। আপনি যদি চান, jQuery ইমেজ এবং কন্টেন্ট স্ক্রোলার w/ লাইটবক্সে আপনি স্লাইডারটি নিজে চালু করতে পারবেন না, তবে আলাদাভাবে লাইটবক্স চালু করতে পারবেন।
14. স্বচ্ছ – অভিযোজিত ব্যানার রোটেটর/স্লাইডার
বেশিরভাগ jQuery স্লাইডারের নিজস্ব ডিজাইন আছে। আপনি নিজের জন্য এটি কাস্টমাইজ করতে পারেন, কিন্তু কখনও কখনও আপনি স্লাইডারের ভিতরে সবকিছুই চান। আমরা আপনাদের সামনে তুলে ধরছি ট্রান্সলুসেন্ট।
স্লাইডারটিতে প্রচুর প্রিসেট রয়েছে। আপনাকে কিছু নির্দিষ্ট সেটিংস সেট করতে হতে পারে এবং এটিই। সম্ভাবনা:
6টি ভিন্ন শৈলী
4 রূপান্তর প্রভাব
2 সোয়াইপ ট্রানজিশন
কাস্টমাইজযোগ্য বোতাম এবং ক্যাপশন
অন্যদের মতো, এই স্লাইডারটি স্পর্শ-সংবেদনশীল, প্রতিক্রিয়াশীল এবং রয়েছে৷ হার্ডওয়্যার ত্বরণ. ট্রান্সলুসেন্ট হল একটি ন্যূনতম ডিজাইন সহ একটি স্লাইডার যা বিষয়বস্তুকে সামনে রাখে৷
15. FSS - ফুল স্ক্রীন স্লাইডিং ওয়েবসাইট প্লাগইন
আপনি কি স্লাইড সমন্বিত একটি পূর্ণ-স্ক্রীন ওয়েবসাইট তৈরি করতে চান? তারপর আপনি FSS প্রয়োজন.
আসলে, এই JQuery স্লাইডার ব্যবহার করে একটি পূর্ণ-স্ক্রীন স্লাইডার ওয়েবসাইট তৈরি করা অত্যন্ত সহজ। সম্ভাবনা:
AJAX সমর্থন
স্ক্রলবার
গভীর সংযোগ প্রযুক্তি সমর্থন
2 ভিন্ন রূপান্তর প্রভাব
এটি কীবোর্ড সমর্থন এবং 11-পৃষ্ঠার গাইডের দিকেও মনোযোগ দেওয়ার মতো। যাইহোক, আসল ছাপ হল FSS এর ওজন, মাত্র 5Kb।
16. Zozo Accordion – অভিযোজিত টাচস্ক্রিন স্লাইডার
একটি jQuery স্লাইডারের আরেকটি উদাহরণ যা স্টাইলিংয়ের উপর ফোকাস করে এবং একটি ভাল কাজ করে। যারা শৈলী পরিবর্তন করার ক্ষমতা সহ একটি ভাল অ্যাকর্ডিয়ন স্লাইডার খুঁজছেন তাদের জন্য Zozo Accordion একটি আবশ্যক।
এই CSS3 অ্যানিমেশন বিউটিতেও বেশ বিস্তৃত বৈশিষ্ট্য রয়েছে:
অনুভূমিক এবং উল্লম্ব অ্যাকর্ডিয়ন
শব্দার্থিক HTML5 এবং SEO অপ্টিমাইজেশান
স্পর্শ, কীবোর্ড এবং WAI-ARIA সমর্থন
10টির বেশি স্কিন এবং 6টি লেআউট
এবং আরো অনেক কিছু
Zozo Accordion-এ বিনামূল্যে সমর্থন এবং ধ্রুবক আপডেট রয়েছে, সেইসাথে আপনি একটি jQuery অ্যাকর্ডিয়নে চান এমন সমস্ত বৈশিষ্ট্য রয়েছে৷
17. jQuery রেসপন্সিভ OneByOne স্লাইডার প্লাগইন
jQuery রেসপন্সিভ OneByOne স্লাইডার প্লাগইন একটি স্লাইডারের পরিবর্তে একটি সাধারণ অ্যানিমেশনের মতো। একটি সময়ে একটি স্লাইড প্রদর্শনের পরিবর্তে, এই উদাহরণটি পরের স্লাইডে যাওয়ার আগে এই অঞ্চলে আর কোন স্থান অবশিষ্ট না থাকা পর্যন্ত স্লাইডগুলি একবারে একটি ধাপে স্লাইড দিয়ে পূর্ণ করে৷
CSS3 অ্যানিমেশন Animate.css-এর অধীনে চলে, এটি হালকা ওজনের, বিভিন্ন স্তর নিয়ে গঠিত এবং মোবাইল বন্ধুত্বপূর্ণ। একাধিক বৈশিষ্ট্য:
ড্র্যাগ অ্যান্ড ড্রপ নেভিগেশন অপশনও রয়েছে। jQuery রেসপন্সিভ OneByOne স্লাইডার প্লাগইন টুইটার বুটস্ট্র্যাপ ক্যারোজেল দ্বারা চালিত।
18. Accordionza - jQuery প্লাগইন
এর চেয়ে সহজ কোন jQuery স্লাইডার নেই। অপারেটিং করার জন্য, আপনাকে স্লাইডারের মাত্র 3Kb ডাউনলোড করতে হবে, যা Accordionza কে সবচেয়ে লাইটওয়েট অ্যাকর্ডিয়ন স্লাইডার করে তোলে।
আপনি যদি তিনটি স্টাইলিং বিকল্প পছন্দ না করেন তবে আপনি নিজেই HTML এবং CSS পরিবর্তন করতে পারেন। সম্ভাবনা:
কীবোর্ড নেভিগেশন
প্রভাব এবং বোতাম কাস্টমাইজ করা সহজ
প্রগতিশীল বর্ধন কৌশল - জাভাস্ক্রিপ্ট ছাড়া কাজ করে
মনে রাখবেন যে Accordionza মিশ্র বিষয়বস্তুর অনেক বৈচিত্র প্রদর্শন করতে পারে, এটি অত্যন্ত নমনীয় করে তোলে।
19. mightySlider - রেসপন্সিভ মাল্টি-পারপাস স্লাইডার
MightySlider সত্যিই একটি শক্তিশালী স্লাইডার। এটি শুধুমাত্র একটি সাধারণ ইমেজ স্লাইডার হিসেবেই নয়, মেনু আইটেম নেভিগেশন সহ একটি পূর্ণ-স্ক্রীন একমুখী স্লাইডার হিসাবেও ব্যবহার করা যেতে পারে। এর সাহায্যে আপনি একটি চমৎকার এক পৃষ্ঠার ওয়েবসাইট তৈরি করতে পারেন।
হুডের নীচে আপনি অনেকগুলি বিকল্প পাবেন:
কীবোর্ড, মাউস এবং স্পর্শ সমর্থন
হার্ডওয়্যার ত্বরণ সহ CSS3 রূপান্তর
বৈধ মার্কআপ এবং এসইও অপ্টিমাইজেশান পরিষ্কার করুন
সীমাহীন সংখ্যক স্লাইড, ক্যাপশনের জন্য স্তর এবং তাদের জন্য প্রভাব
এপিআই খুবই শক্তিশালী এবং ডেভেলপার ফ্রেন্ডলি, যা খুলে যায় বিভিন্ন উপায়েএর ব্যবহার MightySlider হল একটি চমৎকার, প্রগতিশীল jQuery স্লাইডার যেখানে পরিষ্কার এবং ভাল-মন্তব্য করা কোড রয়েছে।
20. প্যারালাক্স স্লাইডার - প্রতিক্রিয়াশীল jQuery প্লাগইন
প্যারালাক্স স্লাইডার jQuery রেসপন্সিভ OneByOne স্লাইডার প্লাগইনের মতো কাজ করে এবং আপনাকে একটি স্লাইডের মধ্যে প্রতিটি স্তর আলাদাভাবে অ্যানিমেট করতে দেয়। আপনি প্যারালাক্স অ্যানিমেশন যোগ করে সমস্ত স্লাইড বা এমনকি একটি অ্যানিমেট করতে পারেন।
4 স্লাইডার অন্তর্ভুক্ত বিভিন্ন ধরনের, সব parallax প্রভাব সঙ্গে. অন্যান্য jQuery স্লাইডারের মতো, এটিতে রয়েছে:
সম্পূর্ণরূপে কাস্টমাইজযোগ্য
স্পর্শ সমর্থন
সম্পূর্ণরূপে প্রতিক্রিয়াশীল, সীমাহীন স্তর
অটোপ্লে, লুপিং, উচ্চতা এবং প্রস্থ সমন্বয়, এবং টাইমার
অ্যানিমেটেড স্তরগুলি কেবল পাঠ্য বা চিত্র সম্পর্কে নয়। আপনি YouTube, Vimeo এবং HTML5 ভিডিও যোগ করতে পারেন। প্যারালাক্স স্লাইডার হল অন্য একটি ভাল উদাহরণ যে আপনি কীভাবে ফ্ল্যাশের থেকেও ভাল ফ্ল্যাশ প্রভাবগুলি অনুকরণ করতে পারেন, যা সমস্ত ডিভাইসে সমর্থিত।
উপসংহার
এটি দেখতে আকর্ষণীয় যে jQuery স্লাইডারগুলি এমন কিছু থেকে কীভাবে বেড়েছে যা কেবল একটি চিত্রকে অন্যটির সাথে সৃজনশীল সরঞ্জামের বিশাল সেটে প্রতিস্থাপন করেছে। এখন 3D, প্যারালাক্স স্লাইডার, পূর্ণ-পৃষ্ঠা স্লাইডার, অভিযোজিত স্লাইডার এবং যেগুলি ডেস্কটপ কম্পিউটার এবং স্মার্টফোন উভয়েই দেখা যায়।
আপনি যদি কোন স্লাইডার পছন্দ না করেন এই তালিকা, আপনি সর্বদা Envato-এ jQuery কোড টিউটোরিয়াল নিতে পারেন এবং সম্পূর্ণ নতুন এবং অনন্য কিছু বিকাশ করতে পারেন।
অথবা এনভাটো মার্কেটে অন্যান্য স্লাইডারগুলি দেখুন - বেছে নেওয়ার জন্য প্রচুর আছে৷ আপনার প্রিয় jQuery স্লাইডার কি এবং কেন?
অভিযোজিত, বা যদি আপনি পছন্দ করেন, প্রতিক্রিয়াশীল ওয়েব ডিজাইন এখন কেবলমাত্র অন্য ডিজাইনের প্রবণতা নয়, এটি ইতিমধ্যেই ওয়েবসাইট বিকাশের জন্য একটি নির্দিষ্ট মান, ওয়েবসাইটগুলির বহুমুখিতা এবং বিভিন্ন ব্যবহারকারীর ডিভাইসের স্ক্রিনে সুরেলা ভিজ্যুয়াল উপলব্ধি নিশ্চিত করে৷ অতি সম্প্রতি, একটি প্রতিক্রিয়াশীল টেমপ্লেট তৈরি করার সময়, সামগ্রিক নকশা শৈলীকে বিরক্ত না করে নির্দিষ্ট স্লাইডার এবং ইমেজ গ্যালারীগুলিকে একীভূত করার জন্য আমাকে বিভিন্ন অসুবিধা মোকাবেলা করতে হয়েছিল। এখন সবকিছু অনেক সহজ, ইন্টারনেটে প্রচুর পরিমাণে প্রস্তুত-তৈরি সমাধান রয়েছে এবং যা বিশেষভাবে আনন্দদায়ক তা হল তাদের বেশিরভাগই অবাধে উপলব্ধ, খোলা সোর্স কোড.
অফার করা বিভিন্ন সরঞ্জামগুলির কারণে, আমি প্রতিক্রিয়াশীল jQuery ইমেজ স্লাইডারগুলির সবচেয়ে উল্লেখযোগ্য বিকাশগুলির একটি সংক্ষিপ্ত ওভারভিউ সংকলন করেছি যা সম্প্রতি উপস্থিত হয়েছে এবং কোনও সীমাবদ্ধতা ছাড়াই বিতরণ করা হয়েছে, যেমন একেবারে বিনামূল্যে।
WOW স্লাইডার
প্রতিক্রিয়াশীল jQuery ইমেজ স্লাইডার যাতে ভিজ্যুয়াল ইফেক্টের একটি দুর্দান্ত সেট (ঘূর্ণন, ফ্লাইআউট, ব্লার, স্পাইরাল, ব্লাইন্ডস, ইত্যাদি...) এবং অনেক রেডিমেড টেমপ্লেট। WOW স্লাইডারের অন্তর্নির্মিত পৃষ্ঠা সন্নিবেশ উইজার্ডের সাহায্যে, আপনি সহজেই এবং অনায়াসে কয়েক মিনিটের মধ্যে অত্যাশ্চর্য স্লাইডশো তৈরি করতে পারেন৷ বিকাশকারীর ওয়েবসাইটে রাশিয়ান ভাষায় প্লাগইন সেট আপ এবং ব্যবহার করার জন্য সমস্ত প্রয়োজনীয় ডকুমেন্টেশন রয়েছে, পাশাপাশি প্লাগইনটি কীভাবে কাজ করে তার চমৎকার লাইভ উদাহরণ রয়েছে। একটি পৃথক ওয়ার্ডপ্রেস প্লাগইন এবং জুমলার জন্য একটি মডিউল ডাউনলোডের জন্য উপলব্ধ। আমি নিশ্চিত যে নতুন এবং অভিজ্ঞ ওয়েবমাস্টার উভয়েই এই চমৎকার স্লাইডারটি অনেকেই পছন্দ করবেন।
হাইস্লাইডার
HiSlider - HTML5, Jquery স্লাইডার এবং ইমেজ গ্যালারি, জনপ্রিয় সিস্টেমে চালিত সাইটগুলিতে ব্যক্তিগত ব্যবহারের জন্য একেবারে বিনামূল্যে প্লাগইন - WordPress, Joomla, Drupal৷ এই সহজ কিন্তু বেশ কার্যকরী টুলের সাহায্যে, আপনি সহজেই আশ্চর্যজনক এবং প্রাণবন্ত স্লাইড শো, দর্শনীয় উপস্থাপনা এবং আপনার ওয়েবসাইটের পৃষ্ঠাগুলিতে নতুন বার্তাগুলির ঘোষণা তৈরি করতে পারেন। স্লাইডারের জন্য বেশ কিছু রেডিমেড টেমপ্লেট এবং স্কিন, আশ্চর্যজনক বিষয়বস্তু পরিবর্তন (পরিবর্তন) প্রভাব, বিভিন্ন মাল্টিমিডিয়া সামগ্রীর আউটপুট: YouTube এবং Vimeo থেকে ভিডিও, নমনীয় ব্যবহারকারী সেটিংস, ইত্যাদি...
নিভো স্লাইডার
নিভো স্লাইডার একটি ভাল পুরানো, যা পরিচিত সকলের কাছে সুপরিচিত, সবচেয়ে সুন্দর এবং ব্যবহার করা সহজ ইমেজ স্লাইডারগুলির মধ্যে একটি৷ JQuery Nivo Slider প্লাগইন ডাউনলোড এবং ব্যবহার করার জন্য বিনামূল্যে এবং MIT লাইসেন্সের অধীনে লাইসেন্সপ্রাপ্ত। ওয়ার্ডপ্রেসের জন্য একটি পৃথক প্লাগইনও রয়েছে, কিন্তু দুর্ভাগ্যবশত এটি ইতিমধ্যেই প্রদান করা হয়েছে এবং আপনাকে একটি লাইসেন্সের জন্য $29 দিতে হবে। WP থিম ফাইলগুলির সাথে একটু ম্যাজিক করা এবং আপনার ব্লগে Nivo Slider প্লাগইনের বিনামূল্যে jQuery সংস্করণ সংযুক্ত করা ভাল, যেহেতু ইন্টারনেটে এটি কীভাবে করা যায় সে সম্পর্কে প্রচুর তথ্য রয়েছে৷
কার্যকারিতা হিসাবে, এটির সাথে সবকিছু ঠিক আছে। এটি jQuery v1.7+ লাইব্রেরি, সুন্দর রূপান্তর প্রভাব, সহজ এবং খুব নমনীয় সেটিংস, অভিযোজিত বিন্যাস, স্বয়ংক্রিয় চিত্র ক্রপিং এবং আরও অনেক কিছু ব্যবহার করে।
স্লাইডারটির ধারণাটি বিকাশকারীদের দ্বারা অনুপ্রাণিত হয়েছিল, যারা অ্যাপল পণ্যগুলির উপস্থাপনা শৈলীর জন্য সুপরিচিত, যেখানে একটি সাধারণ অ্যানিমেশন প্রভাব সহ নির্বাচিত বিভাগে ক্লিক করে বেশ কয়েকটি ছোট বস্তু (ছবি) পরিবর্তন হয়। Codrops আপনার নিষ্পত্তিতে এই স্লাইডারটি কীভাবে তৈরি করবেন তার একটি বিশদ টিউটোরিয়াল, এইচটিএমএল মার্কআপের একটি সম্পূর্ণ বিন্যাস, সিএসএস নিয়মগুলির একটি সেট এবং একটি কার্যকরযোগ্য jQuery প্লাগইন, সেইসাথে স্লাইডার ব্যবহার করার একটি দুর্দান্ত লাইভ উদাহরণ উপস্থাপন করে৷
স্লিট স্লাইডার
JQuery এবং CSS3 ব্যবহার করে ফুল-স্ক্রীন ইমেজ স্লাইডার + ওয়েবসাইটের পৃষ্ঠাগুলিতে প্লাগইন সংহত করার বিস্তারিত টিউটোরিয়াল। পরবর্তী বা পূর্ববর্তী সামগ্রীতে যাওয়ার সময় নির্দিষ্ট বিষয়বস্তু সহ খোলা বর্তমান স্লাইডটিকে টুকরো টুকরো করে ফেলার ধারণা। JQuery ব্যবহার করে এবং CSS অ্যানিমেশনআপনি স্লাইডগুলির মধ্যে অনন্য রূপান্তর তৈরি করতে পারেন। প্রতিক্রিয়াশীল স্লাইডার লেআউট নিশ্চিত করে যে এটি স্ক্রীন জুড়ে সমানভাবে ভাল দেখায় বিভিন্ন ধরনেরব্যবহারকারী ডিভাইস।
ইলাস্টিক কন্টেন্ট স্লাইডার
একটি বিষয়বস্তু স্লাইডার যা স্বয়ংক্রিয়ভাবে প্রস্থ এবং উচ্চতায় সামঞ্জস্য করে যা প্যারেন্ট কন্টেইনারের আকারের উপর নির্ভর করে যেখানে এটি অবস্থিত। প্রয়োগ করা বেশ সহজ এবং সেটিংসে নমনীয়, স্লাইডারটি নিচের দিকে নেভিগেশন সহ চলে, যখন স্ক্রীনের আকার নিচের দিকে পরিবর্তন করা হয়, নেভিগেশনটি আইকন আকারে প্রদর্শিত হয়। খুব বিস্তারিত ডকুমেন্টেশন (সৃষ্টি টিউটোরিয়াল) এবং ব্যবহারের লাইভ উদাহরণ।
3D স্ট্যাক স্লাইডার
স্লাইডারের একটি পরীক্ষামূলক সংস্করণ যা 3D সমতল থেকে রূপান্তর সহ চিত্রগুলি প্রদর্শন করে৷ ছবি দুটি অনুভূমিক স্তুপে বিভক্ত করা হয়েছে, নেভিগেশন তীর ব্যবহার করে প্রতিটি পরবর্তী চিত্রকে দেখার অবস্থায় পরিবর্তন করতে এবং স্থানান্তরিত করে। সাধারণভাবে, বিশেষ কিছুই নয়, তবে ধারণাটি নিজেই এবং কার্যকর করার কৌশলটি বেশ আকর্ষণীয়।
একটি খুব সহজ, 100% প্রতিক্রিয়াশীল এবং পূর্ণ স্ক্রীন jQuery ইমেজ স্লাইডার। স্লাইডারের অপারেশন jQuery-এর ম্যাজিকের সাথে একত্রে CSS ট্রানজিশন (ট্রানজিশন প্রপার্টি) এর উপর ভিত্তি করে। সর্বাধিক-প্রস্থ মানটি ডিফল্টরূপে 100% এ সেট করা থাকে, তাই স্ক্রীনের আকারের পরিবর্তনের উপর নির্ভর করে চিত্রগুলির আকার পরিবর্তিত হবে৷ ডিজাইনে কোন বিশেষ অ্যানিমেশন ইফেক্ট বা ফ্রিলস নেই, সবকিছুই সহজ এবং ঝামেলামুক্ত অপারেশনের জন্য ডিজাইন করা হয়েছে।
ন্যূনতম স্লাইড
নামটি নিজেই কথা বলে, এটি সম্ভবত সবচেয়ে হালকা এবং সংক্ষিপ্ত jQuery ইমেজ স্লাইডারগুলির মধ্যে একটি যা আমি জুড়ে এসেছি (1kb প্লাগইন)। ResponsiveSlides.jsএকটি ছোট jQuery প্লাগইন যা একটি পাত্রের ভিতরে উপাদান ব্যবহার করে একটি স্লাইডশো তৈরি করে। IE-এর সমস্ত সংস্করণ সহ বিস্তৃত ব্রাউজারগুলির সাথে কাজ করে - IE6 এবং উচ্চতর থেকে অগ্রগতির জন্য বিখ্যাত ব্রেক৷ কাজটি নির্ভরযোগ্যতার জন্য জাভাস্ক্রিপ্টের সাথে একত্রে CSS3 রূপান্তর ব্যবহার করে। একটি অবিন্যস্ত তালিকা ব্যবহার করে সহজ বিন্যাস, রূপান্তর এবং সময়ের ব্যবধানের কাস্টমাইজেশন, স্বয়ংক্রিয় এবং ম্যানুয়াল নিয়ন্ত্রণস্লাইড স্যুইচিং, সেইসাথে একাধিক স্লাইড শোর জন্য সমর্থন। এখানে যেমন একটি কৌতুকপূর্ণ "শিশু" আছে.
ক্যামেরা
ক্যামেরা হল ওয়েবসাইট পৃষ্ঠাগুলিতে স্লাইডশো সংগঠিত করার জন্য একটি বিনামূল্যের JQuery প্লাগইন, অনেকগুলি রূপান্তর প্রভাব সহ একটি হালকা স্লাইডার, একটি 100% প্রতিক্রিয়াশীল লেআউট এবং খুব সহজ সেটিংস. যেকোনো ব্যবহারকারীর ডিভাইসের স্ক্রিনে পুরোপুরি ফিট করে (পিসি মনিটর, ট্যাবলেট, স্মার্টফোন এবং মোবাইল ফোন) এমবেডেড ভিডিও প্রদর্শনের সম্ভাবনা। বোতাম এবং ইমেজ থাম্বনেল ব্লক ব্যবহার করে স্বয়ংক্রিয় স্লাইড পরিবর্তন এবং ম্যানুয়াল নিয়ন্ত্রণ। একটি কমপ্যাক্ট ডিজাইনে ছবির প্রায় সম্পূর্ণ গ্যালারি।
bxSlider jQuery
jQuery-এ আরেকটি মোটামুটি সহজ প্রতিক্রিয়াশীল স্লাইডার। আপনি আপনার স্লাইডে যেকোনো বিষয়বস্তু, ভিডিও, ছবি, পাঠ্য এবং অন্যান্য উপাদান রাখতে পারেন। টাচ স্ক্রিনের জন্য প্রসারিত সমর্থন। CSS ট্রানজিশন অ্যানিমেশন ব্যবহার করে। স্লাইড শো এবং কমপ্যাক্ট ইমেজ গ্যালারির বিভিন্ন বৈচিত্রের একটি বড় সংখ্যা। স্বয়ংক্রিয় এবং ম্যানুয়াল নিয়ন্ত্রণ। বোতাম ব্যবহার করে এবং থাম্বনেল নির্বাচন করে স্লাইড পরিবর্তন করুন। ছোট সোর্স ফাইলের আকার, কনফিগার করা এবং বাস্তবায়ন করা খুব সহজ।
ফ্লেক্স স্লাইডার 2
ফ্লেক্স স্লাইডার 2 আপডেট সংস্করণএকই নামের স্লাইডার, উন্নত প্রতিক্রিয়ার গতি, স্ক্রিপ্টের সংক্ষিপ্তকরণ, এবং পুনঃপ্রবাহ/পুনরায় অঙ্কন কমিয়ে আনা। প্লাগইনটিতে একটি মৌলিক স্লাইডার, থাম্বনেইল সহ স্লাইড নিয়ন্ত্রণ, অন্তর্নির্মিত বাম-ডান তীর এবং বোতাম আকারে একটি নীচের নেভিগেশন বার অন্তর্ভুক্ত রয়েছে। স্লাইড (ভিমিও), নমনীয় সেটিংস (ট্রানজিশন, ডিজাইন, সময়ের ব্যবধান), সম্পূর্ণ অভিযোজিত বিন্যাসে ভিডিও প্রদর্শন করার ক্ষমতা।
গ্যালারিয়া
উচ্চ মানের চিত্র গ্যালারী এবং স্লাইডার তৈরি করার জন্য একটি সুপরিচিত এবং বেশ জনপ্রিয় প্রতিক্রিয়াশীল jQuery প্লাগইন। স্লাইডার ইন্টারফেস, এর কন্ট্রোল প্যানেলকে ধন্যবাদ, একটি পরিচিত ভিডিও প্লেয়ারের সাথে সাদৃশ্যপূর্ণ প্লাগইনটিতে বিভিন্ন ডিজাইনের থিম রয়েছে। জনপ্রিয় পরিষেবাগুলি থেকে এমবেড করা ভিডিও এবং চিত্রগুলির জন্য সমর্থন: Flickr, Vimeo, YouTube এবং অন্যান্য। সেটআপ এবং ব্যবহার সম্পর্কে বিস্তারিত ডকুমেন্টেশন।
ব্লুবেরি
প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য বিশেষভাবে লেখা একটি সাধারণ, নো-ফ্রিলস ফ্রি jQuery ইমেজ স্লাইডার। ব্লুবেরি একটি পরীক্ষামূলক ওপেন সোর্স jQuery প্লাগইন। সংক্ষিপ্ত নকশা, কোন প্রভাব নেই, শুধুমাত্র একটি নির্দিষ্ট সময়ের পরে একে অপরকে প্রতিস্থাপন করে মসৃণভাবে পপ-আপ ছবি। সবকিছু খুব সহজ, ইনস্টল করুন, সংযোগ করুন এবং যান...
jQuery popeye 2.1
লাইটবক্স উপাদান সহ একটি খুব কমপ্যাক্ট jQuery ইমেজ স্লাইডার৷ আপনার জন্য ধন্যবাদ নমনীয় মাপ, খুব সহজেই যেকোন কন্টেইনারে, থাম্বনেইলের আকারে একটি একক এন্ট্রিতে তৈরি করা হয়, যখন আপনি মাউস কার্সার হোভার করেন বা সেগুলিতে ক্লিক করেন, একটি বর্ধিত ছবি এবং নিয়ন্ত্রণ সহ একটি লাইটবক্স সক্রিয় হয়৷ পণ্য বা সংবাদ ঘোষণা উপস্থাপনের জন্য পাশের প্যানেলে এই জাতীয় স্লাইডার স্থাপন করা সুবিধাজনক। প্রচুর পরিমাণে তথ্য সহ সাইটগুলির জন্য একটি দুর্দান্ত সমাধান।
সিকোয়েন্স
উন্নত CSS3 ট্রানজিশন সহ বিনামূল্যের প্রতিক্রিয়াশীল স্লাইডার। ন্যূনতম শৈলী, 3টি ডিজাইনের থিম, প্রতিটি ফ্রেম অনুভূমিকভাবে স্লাইড করে, কেন্দ্রে প্রদর্শিত হয়, ছবিটি বাম দিকে যায়, স্বাক্ষর ডানদিকে, থাম্বনেলগুলি নীচের ডানদিকের কোণায় সদৃশ হয়৷ প্রতিটি ফ্রেমে দেখতে হবে পণ্যের দৃশ্যের পৃষ্ঠা সংখ্যা। নিয়ন্ত্রণগুলি পিছনে এবং এগিয়ে বোতামগুলিও অন্তর্ভুক্ত করে। সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত.
সোয়াইপ করুন
কার্যকারিতা এবং সেটিংস উভয় ক্ষেত্রেই একটি খুব সাধারণ চিত্র স্লাইডার; সেটিংসের মধ্যে স্লাইড পরিবর্তনের গতিতে পরিবর্তন রয়েছে, ম্যানুয়াল মোডের সক্রিয়করণ (নিয়ন্ত্রণ বোতামগুলি সক্রিয় করা হয়েছে), ক্রমাগত স্লাইড শো। এই স্লাইডারটির অস্তিত্বের অধিকার রয়েছে এবং এটি আমাকে আকৃষ্ট করেছে কারণ এটি বিদ্যমান রয়েছে;
প্রতিক্রিয়াশীল ইমেজ স্লাইডার
ভ্লাদিমির কুদিনভ, কমরেডদের কাছ থেকে এমন একটি সুন্দর, অভিযোজিত চিত্র স্লাইডার। একটি কঠিন, ভাল-পরিকল্পিত টুল, স্পষ্ট উদাহরণ সহ প্রদান করা হয় এবং বিস্তারিত নির্দেশাবলীসৃষ্টি, ইনস্টলেশন এবং ব্যবহারের উপর। অভিযোজিত নকশা, চমৎকার বোতাম এবং সবুজ তীর, সবকিছু বেশ সুন্দর এবং শান্ত, চাপ ছাড়াই।
ভগ্নাংশ স্লাইডার
ছবি এবং পাঠ্য স্লাইডের জন্য প্যারালাক্স প্রভাব সহ বিনামূল্যে JQuery স্লাইডার প্লাগইন। স্লাইড অ্যানিমেশনের প্রতিটি টাইমিং এবং অ্যানিমেশন সেটিংয়ে সম্পূর্ণ নিয়ন্ত্রণ সহ একাধিক প্রদর্শন মান রয়েছে। একবারে একটি স্লাইডে একাধিক উপাদান অ্যানিমেট করার ক্ষমতা। আপনি একটি নির্দিষ্ট দিক থেকে বিভিন্ন অ্যানিমেশন পদ্ধতি, স্লাইড ফেইড বা ট্রানজিশন সেট করতে পারেন। ন্যাভিগেশন তীরগুলি ব্যবহার করে স্বয়ংক্রিয় প্রদর্শন এবং ম্যানুয়াল নিয়ন্ত্রণ যা আপনি চিত্রের উপর কার্সার করলে পপ আপ হয়। 10 ধরনের স্লাইড অ্যানিমেশন প্রভাব এবং আরও অনেক কিছু...
পর্যালোচনা বেশ বিস্তৃত হতে পরিণত, কিন্তু কারণে যথেষ্ট তথ্যপূর্ণ নয় বড় পরিমাণপ্রশ্নবিদ্ধ পণ্য. সমস্ত বিবরণ এবং বিস্তারিত বিবরণ কার্যকারিতাএই বা সেই প্লাগইনের, আপনি সরাসরি বিকাশকারীদের পৃষ্ঠাগুলিতে খুঁজে পেতে পারেন। আমি কেবল আশা করতে পারি যে আমি কারও পক্ষে তাদের ওয়েবসাইটের পৃষ্ঠাগুলিতে রঙিন ছবি স্লাইডার তৈরি করার জন্য খুব প্রয়োজনীয় সরঞ্জামটি খুঁজে পাওয়া সহজ করে দিয়েছি।
কখনও ভেবেছেন যে রাশিয়ান ভাষার টেমপ্লেটগুলির সাথে কাজ করতে পেরে ভাল হবে? শুধু এক মিনিটের জন্য এটি সম্পর্কে চিন্তা করুন. ইংরেজি ভাষার টেমপ্লেটের সাথে কাজ করার সময় নষ্ট করা যাবে না। আমরা আপনাকে খুশি করতে ত্বরান্বিত করছি যে আপনি এখন টেমপ্লেটমনস্টার মার্কেটপ্লেসে এটি খুঁজে পেতে পারেন। তাদের প্রত্যেকের জন্য পাঠ্য হাতে লেখা ছিল। এবং, অবশ্যই, সমস্ত প্রস্তুত-তৈরি সমাধান ব্যবহার করা অবিশ্বাস্যভাবে সহজ।
শুভেচ্ছা, আন্দ্রে
আমরা এগিয়ে এবং পিছনে বোতাম যোগ করতে হবে.
এটি করার জন্য, আপনাকে পূর্বে লিখিত কোডের পরিপূরক করতে হবে।
নতুন স্লাইডারের জন্য HTML কোড
পুরো স্লাইডার গঠন একই থাকবে। মার্কআপে দুটি পাত্র যোগ করা হবে, যা বোতাম হিসেবে কাজ করবে।
স্লাইডার শৈলী
কনটেইনার.স্লাইডার-বক্সের তুলনায় পরম অবস্থানের কারণে বোতামগুলি তাদের জায়গা নেবে
স্লাইডার-বক্স ( অবস্থান : আপেক্ষিক ; প্রস্থ : 320px ; উচ্চতা : 210px ; ওভারফ্লো : লুকানো ; ) .স্লাইডার ( অবস্থান : আপেক্ষিক ; প্রস্থ : 10000px ; উচ্চতা : 210px ; ) .স্লাইডার img ( float :sli ) ; .prev , .slider-box .next( অবস্থান : পরম ; শীর্ষ : 100px ; প্রদর্শন : ব্লক ; প্রস্থ : 29px ; উচ্চতা : 29px ; কার্সার : পয়েন্টার ; ) .স্লাইডার-বক্স .পূর্ববর্তী (বাম : 10px ; ব্যাকগ্রাউন্ড : url ,.
স্ক্রিপ্ট
স্লাইডার স্বয়ংক্রিয়ভাবে স্ক্রোল করে। ডিফল্টরূপে, আন্দোলনটি বাম থেকে ডানে যায়, তবে প্রয়োজনে, আপনি কোর্স ভেরিয়েবল ব্যবহার করে এর গতির দিক পরিবর্তন করতে পারেন। যখন ভেরিয়েবলের মান 1 থেকে -1 পরিবর্তিত হয়, তখন স্লাইডারের গতিবিধি পরিবর্তন হবে।
কার্সারটি স্লাইডারের মধ্যে থাকলে স্লাইডারে থাকা চিত্রগুলি পরিবর্তন করা উচিত নয়৷ কেন এটা করা হচ্ছে? এটা সহজ. যদি মাউস কার্সারটি স্লাইডারে অবস্থিত থাকে, তাহলে এর মানে হল যে সাইট ভিজিটর এর বিষয়বস্তুতে আগ্রহী। এই সময়ে, আপনার স্বয়ংক্রিয়ভাবে স্লাইড পরিবর্তন করা উচিত নয়।
$(ফাংশন () ( var slider = $(."slider") , sliderContent = slider.html () , // স্লাইডার সামগ্রী slideWidth = $(."slider-box" ).outerWidth() , // স্লাইডার প্রস্থ slideCount = $(."slider img" ) .দৈর্ঘ্য , // স্লাইডের সংখ্যা prev = $(."slider-box .prev" ) , // পিছনের বোতাম পরবর্তী = $(."slider-box .next" ) , // ফরোয়ার্ড বোতামস্লাইডার ইন্টারভাল = 3300 , // স্লাইড পরিবর্তনের ব্যবধানঅ্যানিমেটটাইম = 1000 , // স্লাইড পরিবর্তনের সময়কোর্স = 1, // স্লাইডার চলাচলের দিক (1 বা -1)মার্জিন = - স্লাইড প্রস্থ; // প্রাথমিক স্লাইড অফসেট$(."স্লাইডার img:last" ) .clone ().prependTo (."slider" ); // শেষ স্লাইডের একটি অনুলিপি শুরুতে স্থাপন করা হয়েছে।$(."স্লাইডার img" ) .eq (1) .clone ().appendTo (."slider" ); // প্রথম স্লাইডের একটি অনুলিপি শেষে স্থাপন করা হয়।$(."স্লাইডার" ) .css ("মার্জিন-বাম" , - স্লাইডউইথ) ; // Container.slider একটি স্লাইডের প্রস্থ দ্বারা বাম দিকে স্থানান্তরিত হয়।ফাংশন nextSlide() ( // অ্যানিমেশন() ফাংশনটি স্লাইড পরিবর্তন করার জন্য চালু করা হয়েছে। interval = window.setInterval(অ্যানিমেট, sliderInterval); ) ফাংশন অ্যানিমেট() ( যদি (মার্জিন==- স্লাইডকাউন্ট* স্লাইডউইথ- স্লাইডউইথ) (// যদি স্লাইডার শেষ পর্যন্ত পৌঁছে যায় slider.css ("মার্জিনলেফ্ট" :- স্লাইডউইথ) );// তারপর block.slider তার প্রাথমিক অবস্থানে ফিরে আসে মার্জিন=- স্লাইড প্রস্থ* 2;) অন্যথায় যদি ( মার্জিন== 0 && কোর্স==- 1 ) ( // স্লাইডার শুরুতে থাকলে এবং পিছনের বোতামটি চাপলে slider.css ("মার্জিনলেফ্ট" :- স্লাইডউইথ* স্লাইডকাউন্ট) ); // তারপর block.slider চূড়ান্ত অবস্থানে চলে যায় margin=- slideWidth* slideCount+ slideWidth; ) অন্য (// যদি উপরের শর্তগুলো কাজ না করে, মার্জিন = মার্জিন - স্লাইড প্রস্থ* (কোর্স);// মার্জিন মান পরবর্তী স্লাইড দেখানোর জন্য সেট করা হয়েছে ) slider.animate ("মার্জিনলেফ্ট" : মার্জিন) , অ্যানিমেটটাইম) ;// Block.slider 1 স্লাইড দ্বারা বাম দিকে স্থানান্তরিত হয়। ) ফাংশন স্লাইডারস্টপ() ( var course2 = কোর্স; কোর্স = - 1;অ্যানিমেট(); ) ফাংশন স্লাইডারস্টপ() (// animate() ফাংশন কল করুন কোর্স = কোর্স2 ;) ); next.click(function()( if (slider.is (":এনিমেটেড") ) ( মিথ্যা ফেরত দিন ; ) // যদি কোন অ্যানিমেশন না ঘটে var course2 = কোর্স; কোর্স = - 1;// কোর্সের মান সংরক্ষণ করার জন্য অস্থায়ী পরিবর্তনশীল কোর্স = 1;// ডান থেকে বামে স্লাইডারের দিক নির্ধারণ করে অ্যানিমেট();কোর্স = কোর্স2 ; // কোর্স ভেরিয়েবল তার মূল মান নেয়) ); slider.add(next).add(prev).hover(function()(// মাউস কার্সার যদি স্লাইডারের মধ্যে থাকে স্লাইডারস্টপ(); } ) ;// স্লাইডারস্টপ() ফাংশনটিকে স্লাইডারকে বিরতি দিতে বলা হয়
), পরবর্তী স্লাইড); // যখন কার্সার স্লাইডার ছেড়ে যায়, তখন অ্যানিমেশন আবার শুরু হয়। nextSlide();
// কল nextSlide() ফাংশন
ফলাফল সামনে এবং পিছনে বোতাম সহ একটি স্লাইডার।
হ্যালো, প্রিয় ব্লগ পাঠকদের. আজ আমি আপনাদের জন্য একটি দরকারী উপস্থাপন করছি
উদাহরণ সহ বিনামূল্যের jQuery স্লাইডারের একটি নির্বাচন
. আপনি যদি এখনও আপনার রিসোর্সে একটি ইমেজ স্লাইডার রাখার সিদ্ধান্ত নেন, তাহলে এই নির্বাচনটি আপনার জন্য খুবই উপযোগী হবে, এবং বিশ্বাস করুন, আপনার কাছে বেছে নেওয়ার মতো অনেক কিছু আছে। তদুপরি, সমস্ত স্লাইডারের উদাহরণ রয়েছে এবং আপনি তাদের প্রতিটিকে কর্মে চেষ্টা করতে পারেন। সাধারণভাবে, আমি আপনাকে বিভ্রান্ত করব না, আপনার পছন্দ নিন :-)
সহজ jQuery ইমেজ স্লাইডার
আপনার সাইটে সবচেয়ে সাধারণ এবং ছোট থাম্বনেইল স্লাইডার।
JQuery-এ থাম্বনেইল স্লাইডার
থাম্বনেইল সহ একটি খুব সহজ এবং আকর্ষণীয় স্লাইডার যা প্রায় যেকোনো ডিজাইনের জন্য উপযুক্ত।
সাইটের জন্য সুন্দর স্লাইডার
আকর্ষণীয় পাঠ্য স্ক্রোলিং সহ একটি বড় এবং খুব সুন্দর চিত্র স্লাইডার।
নিয়মিত jQuery স্লাইডার
আপনার সম্পদের জন্য সবচেয়ে সাধারণ এবং সহজ স্লাইডার
বর্ণনা সহ বড় স্লাইডার
একটি দর্শনীয় স্লাইডার যা অতিক্রম করা অসম্ভব।
JQuery ইমেজ স্লাইডার এবং বর্ণনা
অপেক্ষা করুন এবং আড়ম্বরপূর্ণ টেক্সট স্লাইডার ছবি সহ এবং একটি সুন্দর ফ্লিপিং প্রভাব সহ। ইঙ্গিত সহ ছবি স্ক্রোল করাসময়ের মতো পুরানো এবং খুব জনপ্রিয়। আমার বিস্ময়ের কোন সীমা ছিল না যখন, প্রতিটি নতুন খোলা ডেমোর সাথে, শালীন কিছু খুঁজে পাওয়ার আশা আমাদের চোখের সামনে গলে গেল। এই বিষয়ে, নির্বাচন বড় ছিল না কিন্তু, আমার মতে, বেশ আকর্ষণীয় নমুনা সহ। তাদের মধ্যে অভিযোজিত উভয় আছে ইমেজ গ্যালারীতাই এবং গ্যালারী.
যাইহোক, পূর্ববর্তী বিষয়ে আমি ওয়ার্ডপ্রেসের জন্য গ্যালারি প্লাগইনগুলির একটি নির্বাচন করেছি, তাই আপনার যদি ওয়ার্ডপ্রেসে একটি ওয়েবসাইট থাকে তবে আমি মনে করি এটি আপনার কাছে অত্যন্ত আকর্ষণীয় হবে।
1. একত্রিত গ্যালারি
বিনামূল্যে, অভিযোজিত ফটো এবং ভিডিও গ্যালারি jQuery লাইব্রেরির উপর ভিত্তি করে। বিকাশের সময়, ব্যবহার এবং কনফিগারেশনের সহজতার উপর জোর দেওয়া হয়েছিল। এটি বেশ বড় সংখ্যক উচ্চ-মানের থিমের সাথে আসে এবং, গুরুত্বপূর্ণভাবে, আপনার নিজের থিমগুলি লেখা সম্ভব।2. থাম্বনেইল ক্যারোজেল সহ প্রতিক্রিয়াশীল চিত্র গ্যালারি
প্রতিক্রিয়াশীল ইমেজ গ্যালারিপ্রিভিউ ক্যারোজেল নিষ্ক্রিয় করার ফাংশন সহ। আপনার স্ক্রিনের আকারের সাথে সামঞ্জস্য করে, ছবি লোড করার জন্য একটি প্রিলোডার রয়েছে।
4. jQuery সহ সম্পূর্ণ পৃষ্ঠা চিত্র গ্যালারি
আরও একজন পূর্ণ পর্দা ইমেজ গ্যালারি. এর বিশেষত্ব এবং "উদ্দীপনা" হল মাউসের অবস্থানের উপর নির্ভর করে একটি বর্ধিত পূর্ণ-স্ক্রীন চিত্রের গতিবিধি।স্ক্রিনের নীচের থাম্বনেইল বারটি স্বয়ংক্রিয়ভাবে স্ক্রোল হয় যখন ব্যবহারকারী মাউস সরান।
5. jQuery সহ স্লাইডার গ্যালারি
অ্যালবামে গ্যালারী বিভক্ত করার জন্য আদর্শ। আপনি যখন একটি অ্যালবাম, থাম্বনেইল নির্বাচন করুন ইমেজ স্লাইডার.
