আমরা সিএসএস এবং এইচটিএমএল কোডের একটি রাউন্ডটি অবিরত রেখেছি যা আমাদের ওয়েবসাইটে এটি প্রয়োগ করা যেতে পারে যাতে এটিকে স্পেশাল স্পর্শ দেয় যাতে এটির সাথে আলাদা থেকে আলাদা করা যায়। আমরা করতে পারি এমন + সি নিয়ন্ত্রণ প্লাস + ভি নিয়ন্ত্রণের জন্য ধন্যবাদ আমাদের হাতে কোড রয়েছে যা ওয়েবটি প্রস্তুত করে দেবে পরীক্ষায় দিন বা সপ্তাহ ব্যয় করার পরে বিকাশে প্রকাশিত হবে।
এইচটিএমএল এবং সিএসএসে ২ sl টি স্লাইডারের জন্য এখন সময় এসেছে যা আমাদের সেই জায়গাটি প্রস্তুত করতে দেয় যেখানে আমরা সাধারণত কয়েকটি পিক্সেল স্কোয়ারে প্রচুর পরিমাণে সামগ্রী একীভূত করি। এই স্লাইডারগুলি কার্ড থেকে শুরু করে, তুলনামূলক, পূর্ণ পর্দা, প্রতিক্রিয়াশীল এবং সর্বাধিক সহজ, তবে একই সাথে খুব মার্জিত। আমরা ২ sl টি স্লাইডারের সাথে যাচ্ছি যা কাউকে উদাসীন রাখবে না, বিশেষত গ্রাহক বা ব্যবহারকারী যারা আপনার ওয়েবসাইটের মাধ্যমে সামগ্রী পড়তে, পণ্য ক্রয় করতে বা কোনও চিত্রের আগে এবং পরে তুলনা করতে তুলনামূলক স্লাইডার ব্যবহার করে।
কার্ডগুলিতে স্ক্রীন
এইচটিএমএল এবং সিএসএসের একটি খুব স্বজ্ঞাত স্লাইডার যা এর সাথে সম্পর্কিত হয় আপনার ওয়েবসাইটে কার্ডের একটি সিরিজ নিন যা দুর্দান্ত শৈলীর সাথে একটি অ্যানিমেশন দিয়ে একে অপরকে দেওয়া হয়। এটি যথাযথভাবে অ্যানিমেশন এবং পটভূমির গ্রেডিয়েন্ট যা এই এইচটিএমএল এবং সিএসএস কোডকে এই সূক্ষ্ম স্পর্শ দেয় যা জাভাস্ক্রিপ্টের জন্যও কিছুটা দাঁড়ায়। মার্জিত এই মানের স্লাইডার চিত্রিত করার শব্দ।
তথ্য কার্ড স্লাইডার
এই তথ্য কার্ড স্লাইডারটি এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে কোডও রয়েছে। এটা বরং সম্পর্কে কার্ডের একটি সিরিজ এটি অ্যানিমেশনটির জন্য খুব বেশি মনোযোগ আকর্ষণ করে না, যদিও এর সরলতা এটির সর্বোচ্চ মূল্য। এই তালিকা থেকে বিবেচনা করার জন্য আরেকটি স্লাইডার।
তুলনামূলক ইমেজ স্লাইডার
এই স্লাইডারটি হ'ল দুর্দান্ত উপযোগিতা এবং অবশ্যই আপনি এটি বেশ কয়েকটি ওয়েবসাইটে দেখেছেন যেখানে ছবিগুলির আগে এবং পরে অনুভূমিকভাবে স্লাইড হওয়া উল্লম্ব বারের সাথে তুলনা করা হয়। এটি তুলনা করার জন্য একটি দুর্দান্ত সহায়তা, তাই আমরা স্লাইডারের এই তালিকায় এটি অন্যতম প্রয়োজনীয়তা তৈরি করেছি।
জাভাস্ক্রিপ্ট ছাড়াই তুলনামূলক স্লাইডার
এই স্লাইডারের দুর্দান্ত গুণটি হ'ল জাভাস্ক্রিপ্ট ছাড়া আসে, সুতরাং আপনাকে অন্য একটি তুলনা করতে কেবল আপনার ওয়েবসাইটে সিএসএস এবং এইচটিএমএল কোডটি প্রয়োগ করতে হবে। চিত্রের তুলনা দেখতে আপনাকে এটিকে এক পাশ থেকে অন্য দিকে স্লাইড করতে ছবির নীচে কালো বাক্সটি ব্যবহার করতে হবে। পূর্বেরটির মতো স্বজ্ঞাত নয়, তবে জাভাস্ক্রিপ্ট ছাড়াই খুব দরকারী।
তিন স্তরের তুলনামূলক চিত্র স্লাইডার
এর নাম এটি সব বলে, একটি চিত্র স্লাইডার আপনাকে একবারে তিনটি পর্যন্ত তুলনা করতে দেয়। প্রদত্ত উদাহরণটি হ'ল মাথাটি প্রোফাইলে দেখতে, অন্যজন পেশী দেখাতে এবং আরেকটি স্লাইডার হাড়গুলি দেখতে। এটি এর ক্রিয়াকলাপের জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে।
ভ্যানিলা জেএস চিত্র স্লাইডার
আর একটি তুলনামূলক চিত্র স্লাইডার একটি বড় বোতাম সঙ্গে যা দিয়ে চিত্রটি একপাশ থেকে অন্য দিকে স্লাইড করতে হবে। মিনিমালিস্ট, সামান্য জাভাস্ক্রিপ্ট এবং দুর্দান্ত ভিজ্যুয়াল ফিনিস সহ। চিত্রগুলির তুলনা করার জন্য সবচেয়ে আকর্ষণীয় একটি।
স্ক্রিনটি তির্যকভাবে বিভক্ত করুন
এস্তে তুলনামূলক ইমেজ স্লাইডার এটি এনভাতো টুটস দ্বারা নির্মিত এবং এই পার্থক্য রয়েছে যে দুটি চিত্রের তুলনা করার সময় স্লাইডারটি অন্যান্য ধরণের সংবেদন সৃষ্টি করার জন্য তির্যকভাবে স্থাপন করা হয়েছিল। এটি একটি উচ্চ মানের তুলনামূলক স্লাইডার হতে জাভাস্ক্রিপ্ট, সিএসএস এবং এইচটিএমএল ব্যবহার করে।
পূর্ণ স্ক্রিন স্লাইডার
আমরা পূর্ণ স্ক্রিন স্লাইডারের অংশে পেয়েছি তার সাথে দেখা করতে স্লাইডার ট্রানজিশন একটি রূপান্তর দ্বারা চিহ্নিত করা হয় দুর্দান্ত প্রভাব একটি অ্যানিমেশন দ্বারা বাহিত। আপনি যদি পুরো স্ক্রিনে চিত্রগুলি দেখানোর পরিকল্পনা করেন এবং আপনি খুব সাবধানে যাচ্ছেন, জাভাস্ক্রিপ্ট, সিএসএস এবং এইচটিএমএল কোড।
প্যারাল্যাক্স সহ অনুভূমিক স্লাইডার
জন্য এই স্লাইডারটি প্যারালাক্স প্রভাবিত করে Swiper.js, এইচটিএমএল এবং সিএসএস সহ। প্রতিটি পাশের দুটি বোতামের সাথে স্লাইড করতে সক্ষম হওয়া ছাড়াও, ডানদিকে সম্পূর্ণ ক্যারোসেলের সমস্ত চিত্র মিনিয়েচারে রয়েছে। একটি ভিন্ন এবং উচ্চ মানের ভিজ্যুয়াল স্লাইডার যা আমাদের ওয়েবসাইট দেখার জন্য উদাসীন কেউ ছাড়বে না।
স্মুথ থ্রিডি ডিসপ্রেসিভ স্লাইডার
একটি প্রতিক্রিয়াশীল স্লাইডার পয়েন্টার আন্দোলন অনুসরণ করুন মাউস এটি দৃষ্টিকোণের দুর্দান্ত প্রভাব তৈরি করতে সক্ষম যা দর্শকের মধ্যে মিশ্র অনুভূতি সৃষ্টি করতে পারে। আপনি যদি এটি সঠিকভাবে ব্যবহার করতে জানেন তবে আমাদের ওয়েবসাইটটিতে আপনি সেই মূল এবং সূক্ষ্ম স্পর্শ দিতে পারেন। জাভাস্ক্রিপ্ট, সিএসএস এবং এইচটিএমএল কোড অনুপস্থিত।
হিরো পূর্ণ পর্দার স্লাইডার
এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে পূর্ণ স্ক্রিনের নায়ক চিত্র স্লাইডার। আছে একটি প্রতিটি অ্যানিমেশনে বাউন্স প্রভাব এটি এটি দেয় এবং সাধারণভাবে আমরা বাকী তালিকার মতো একটি মানের পূর্ণ স্ক্রিন স্লাইডারের মুখোমুখি।
সীমানা সহ VELO.JS স্লাইডার
একটি সহজ চমত্কার ট্রানজিশন অ্যানিমেশন সহ পূর্ণ স্ক্রিন স্লাইডার হিসাবে হাইলাইটগুলির মধ্যে একটি। কীভাবে ওয়েবে এটি প্রয়োগ করা যায় সে সম্পর্কে চিন্তাভাবনা শুরু করার জন্য আমরা আপনাকে এটি অপারেশনতে দেখতে পরামর্শ দিই। বেগ প্রভাব ব্যবহার করুন তীর বোতাম ব্যবহার করে এমন অ্যানিমেশনটি উন্নত করতে, নেভিগেশনে ক্লিক করুন এমনকি স্ক্রোলিংও সহজভাবে নিখুঁত।
থাম্বনেইল সহ প্রতিক্রিয়াশীল সিএসএস উল্লম্ব স্লাইডার
আমরা স্লাইডারগুলিতে এগিয়ে যাই মোবাইলের জন্য প্রতিক্রিয়াশীল সিএসএস এই মত দুর্দান্ত মানের। ডানদিকে আপনার থাম্বনেইলগুলির একটি সিরিজ থাকবে যা চাপলে উল্লম্ব পতনে একটি অ্যানিমেশন শুরু হবে। এই তালিকার সেরাগুলির একটি স্লাইডার রেখে কেবল সিএসএস ব্যবহার করে দুর্দান্ত প্রভাব leave
চিত্র স্লাইডার ফ্লেক্সবক্স
Otro জাভাস্ক্রিপ্ট দিয়ে তৈরি প্রতিক্রিয়াশীল ইমেজ স্লাইডার এবং এটি বেশ মার্জিত হওয়ার চেয়ে সহজ is সংক্ষিপ্ত, সাদামাটা এবং এ ছাড়া আর কিছুই নয় ন্যূনতম। ফ্লেক্সবক্স স্লাইডারগুলির এই তালিকায় এটির স্থান রয়েছে।
এসভিজি ফিল্টারগুলির সাথে মোশন অস্পষ্টতা
একটি প্রভাব যা এর প্রভাব অনুকরণ করে গতি অস্পষ্ট প্রতিবার একটি স্লাইড সচল. এটিতে একটি এসভিজি গাউসিয়ান ব্লার ফিল্টার এবং কয়েকটি সিএসএস অ্যানিমেশন কী ব্যবহার করা হয়েছে। জাভাস্ক্রিপ্টে ব্যবহৃত কোডটি নিখুঁতভাবে প্রদত্ত উদাহরণ এবং স্লাইডারের কার্যকারিতার জন্য।
অ্যানিমেটেড স্লাইডার
একটি অ্যানিমেটেড স্লাইডার জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস সহ প্রতিক্রিয়াশীল। আমাদের ডানদিকে তীর রয়েছে যা আমাদের এমন চিত্রগুলির মধ্য দিয়ে যেতে দেয় যা একটি মনোমুগ্ধকর এবং সংক্ষিপ্ত অ্যানিমেশন দিয়ে উত্পন্ন হয়। নিজেকে আলাদা করে রাখতে প্রতিটি স্লাইডে দুর্দান্ত প্রভাব অর্জন করা হয়। অ্যানিমেশনগুলিতে খুব বর্তমান।
এসভিজি নিদর্শন সহ চিত্র স্লাইডার
চেষ্টা করা সেই পরীক্ষাগুলির মধ্যে আরও একটি one এসভিজি নিদর্শন বহন করুন সিএসএস স্লাইডারের জন্য কিছু মুখোশ চিত্র তৈরি করতে। এটি দুর্দান্ত ফিনিস সহ খুব আকর্ষণীয় অস্পষ্ট প্রভাব তৈরি করে। আমাদের ওয়েবসাইটের দর্শনার্থীর মধ্যে ভাল অনুভূতি উস্কে দেওয়ার জন্য সেই স্লাইডারের আরেকটি one
সাধারণ স্তর স্লাইডার
আরও একটির সাথে স্লাইডার বিশিষ্ট অ্যানিমেশন যা প্রতিবারই আমরা একটি নতুন চিত্র স্লাইড করতে আইকনটিতে ক্লিক করি সেই তরঙ্গ প্রভাব সরবরাহ করে। এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে সম্পন্ন হয়ে এটি অন্য চিত্র স্লাইডারে পরিণত হয়।
খাঁটি সিএসএস স্লাইডার
খালি সিএসএস হ'ল সহজ স্লাইডারগুলির একটি। এটির একটি সুবিধা রাখুন নীচে বিন্দু একটি সিরিজ বাম এটি কোনও বিশেষ অ্যানিমেশন ছাড়াই আমাদের আগে যে চিত্রগুলি চলে যাবে তার প্রতিটিটিতে পৌঁছানোর বোতাম হিসাবে কাজ করবে।
কাপকেকস কেবল সিএসএস স্লাইডার
El তালিকার মধুরতম স্লাইডার এবং এটি কেবল সিএসএস এবং এইচটিএমএলে রয়েছে। কাপকেকের বিভিন্ন প্রকারের ডানদিকে থাকা সম্পূর্ণ তালিকার মধ্যে একটি বিশেষ বিশেষ। একটিতে ক্লিক করুন এবং একটি কাপকেইস দুর্দান্ত এক অ্যানিমেশন সহ উপস্থিত হবে যা দুর্দান্ত বাউন্স প্রভাবের সাথে শেষ হয়। একটি সন্দেহ ছাড়াই সেরা।
স্লাইডার অ্যানিমেশন প্রভাব
অ্যানিমেশন এবং কি সবচেয়ে সর্বাধিক মার্জিত স্লাইডার প্রথম পরিবর্তন এ আমাদের বিস্মিত করতে পরিচালিত করে। প্রথম মুহূর্ত থেকেই অ্যানিমেশনটি উত্থাপিত হয়, এর এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কোড আমাদের বিস্মিত করে। এটি দেয় নূন্যতম স্পর্শে সেরা আরেকটি।
স্লাইডার স্লাইস
Un একটি সাধারণ অ্যাড ক্লাস ব্যবহার করে ট্রানজিশন স্লাইডার এবং এটি এই তালিকার অন্যতম পছন্দের হয়ে ওঠার জন্য খুব মসৃণ অ্যানিমেশনগুলির দ্বারা চিহ্নিত। আপনি যদি ওয়েবের মোবাইল সংস্করণে নিজেকে আলাদা করতে চান তবে এটি অন্যতম প্রয়োজনীয়তা। দারুণভাবে ডিল।
স্লাইডার প্যারালাক্স নিউ ইয়র্ক
এর অন্যতম বড় সুবিধা সিএসএসে প্যারাল্যাক্স স্লাইডার এটি অনেকটা কাস্টমাইজ করা যায়। এর অর্থ হ'ল আপনি হরফ, তার আকার, রং এবং অ্যানিমেশনের গতি পরিবর্তন করতে পারবেন। নতুন জাভাস্ক্রিপ্ট অ্যারে স্ট্রিংয়ে প্রতিটি শহরের প্রথম অক্ষর একটি নতুন স্লাইডে উপস্থিত হয়। এই পোস্টের আরও একটি মূল্যবান স্লাইডার।
স্লাইডার পপআউট
একটি সঙ্গে মিনিমালিস্ট স্টাইল এই স্লাইডার উপস্থাপন করা হয় যাতে প্রতিটি স্লাইড সহ চিত্রের প্রতিটি অংশ বেরিয়ে আসে। স্লাইডারগুলির তালিকায় যা দেখা যায় তার থেকে খুব সৃজনশীল এবং পৃথক এবং এটি তার নিজের জায়গায় দাঁড়িয়ে।
রিপল প্রভাব সহ স্লাইডার
Un উচ্চ-প্রভাব পূর্ণ-স্ক্রিন স্লাইডার এর সমস্ত রস পেতে ফ্ল্যাট রঙের সাথে। নজরকাড়া প্রভাব সহ অন্য স্লাইডারের জন্য জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস।
চিত্রের পূর্বরূপ সহ স্লাইডার
স্লাইডার আসন্ন স্লাইডগুলির পূর্বরূপ সহ জিএসএপি এটি ব্যবহারকারীর সামনে উপস্থাপন করা হবে। কোনও ফ্যাশন বা ডিজাইনের ওয়েবসাইটে মডেলিংয়ের জন্য উপযুক্ত।
স্লাইডার স্থানান্তর
আমরা একটি দিয়ে তালিকাটি শেষ করি বোম্বাস্টিক এফেক্ট সহ উচ্চমানের স্লাইডার এবং অ্যানিমেশনগুলির একটি সিরিজ যা আমাদের ওয়েবসাইটে সেই বিশেষ স্পর্শ পায়। প্যারাল্যাক্স প্রভাব সক্রিয় করা যেতে পারে।
এটি মিস করবেন না অন্য সিএসএস কোড তালিকা বোতাম জন্য।
খুব ভাল এই পোস্ট, শেয়ার করার জন্য আপনাকে অনেক ধন্যবাদ. প্রিয়তে যায় সরাসরি বিরতিহীন।
শুভেচ্ছা সাথী.