আপনার ওয়েবসাইটের জন্য 19 স্লাইডার বা ক্যারোলস সিএসএস এবং এইচটিএমএল

বিনামূল্যে স্লাইডার

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

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

অনুভূমিক কারাউসেলস

প্রতিক্রিয়াশীল

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

সম্পর্কিত নিবন্ধ:
27 এইচটিএমএল এবং সিএসএস স্লাইডারগুলি আপনার ওয়েবসাইটটিকে বিশেষ স্পর্শ দেওয়ার জন্য

প্রতিক্রিয়াশীল অসীম ক্যারোসেল

স্ব-প্রজনন

এই স্লাইডারটি হ'ল কখনও কখনও দেখা যেতে পারে এমন বিজ্ঞাপনের মতো পাশের সকার ক্ষেত্রগুলিতে এবং বিভিন্ন বিজ্ঞাপনগুলি দেখায় যা অনুভূমিকভাবে স্ক্রোল করে। এটি ল্যান্ডিং পৃষ্ঠাগুলির জন্য আদর্শ যা ব্র্যান্ডের অংশীদার এবং অন্যান্য ধরণের লোগো প্রদর্শন করতে হবে।

প্রতিক্রিয়া ক্যারোসেল

3 ডি কারাউসেল

এই স্ক্রোল এর React.js এর জন্য দাঁড়িয়ে আছে। আমরা ধারাবাহিক আকারে চিত্রগুলি প্রদর্শন করতে itselfণদান করি কারণ আমরা একটি অবিচ্ছিন্ন অ্যানিমেশনে একটি চিত্র থেকে অন্য ছবিতে যাই। এই মোটামুটি সহজ সিএসএস সম্পর্কে আরও কিছু বলার অপেক্ষা রাখে না তবে ওয়েবে এটি কীভাবে সঠিকভাবে স্থাপন করতে হয় তা যদি আমরা জানি তবে দুর্দান্ত প্রভাব।

স্মুথ 3 ডি স্লাইডার

3 ডি কারাউসেল

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

সম্পর্কিত নিবন্ধ:
46 জাভাস্ক্রিপ্ট স্লাইডার এবং স্ক্রোলার

স্বয়ংক্রিয় অসীম ক্যারোসেল

অসীম ক্যারোসেল

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

হাওর ক্যারোসেল

হাওর ক্যারোসেল

হোভার এলিমেন্টের সাথে এটি বাম থেকে ডানে স্লাইডার সরানো, বা তদ্বিপরীত, আমরা এটির উপর মাউস পয়েন্টার রেখেছি। এই চিত্র স্লাইডারটি রচনা করতে পারে এমন বিভিন্ন ফটোর মধ্যে সরানোর জন্য একটি মসৃণ স্থানান্তর।

মোবাইল কারাউসেল

মোবাইল কারাউসেল

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

ইনস্টাগ্রাম ফিড ক্যারোসেল

ইনস্টাগ্রাম

আপনি এই স্লাইডারের পিছনে থাকা ধারণাটি ক্র্যাশ করতে পারেন out ইমেজগুলির একটি ফালা দ্বারা যা বাড়ানো যেতে পারে তাদের একটিতে ক্লিক করে। দুর্দান্ত প্রভাবের একটি অ্যানিমেশন, যদিও এটি নির্দিষ্ট ধরণের ওয়েবসাইটের জন্য নির্দেশিত। ইনস্টাগ্রাম পোস্টগুলি একটি স্লিক.জে এস কারসোলে নেওয়া হয়েছে।

সাধারণ সিঙ্ক্রোনাইজড কারাউসেল

সরল কারাউসেল

যদিও এটি পূর্ববর্তী চিত্রগুলির সাথে বিশেষত চিত্রগুলির স্ট্রিপগুলিতে অনেক কিছুই রয়েছে স্লাইডারের সাথে মিথস্ক্রিয়াটি খুব আলাদা বাম থেকে ডানে এবং তদ্বিপরীত দিকে পাশের অঙ্গভঙ্গি দিয়ে এটিকে সরানোর মাধ্যমে। আবার আমরা slick.js এর জিনিস করছেন। এর দুর্দান্ত প্রভাবের জন্য স্ট্রাইকিং।

3 ডি আনুভূমিক কারাউসেলস

3 ডি অনুভূমিক ক্যারোসেল

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

সিএসএস কারাউসেল

সিএসএস 3 ডি

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

অ্যাম্বিলাইট বুটস্ট্র্যাপ কারাউসেল

বুটস্ট্র্যাপ কারাউসেল

দুর্দান্ত প্রভাব সহ একটি সাধারণ স্লাইডার যা বেশি পরিমাণে দাঁড়ায় না। এক এই সহজ স্লাইডার যা আমরা সাধারণত সন্ধান করি এবং এটি প্রচন্ড ধোঁকা ছাড়াই এক হওয়ার অনুভূতি দেয়, তবে এটি পুরোপুরি তার কার্য সম্পাদন করে।

ক্যারোসেল দল

ক্যারোসেল দল

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

ক্যারোসেল কিউব

3 ডি কিউব

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

ক্যারোসেল তীর কীগুলি

সিএসএস কী

একটি স্লাইডার যাতে ইন্টারঅ্যাকশনটি দিয়ে যায় তীর কী ব্যবহার করে using। অনেক ধাঁধা ছাড়াই সহজ যা সরাসরি অন্য ধরণের মিথস্ক্রিয়ায় চলে আসে, এটি বহু বছর আগে থেকেই মনে হয়। একটি নির্দিষ্ট ব্যবহারের জন্য।

উল্লম্ব ক্যারোসেলস

উল্লম্ব ক্যারোসেল

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

খাঁটি সিএসএস কারাউসেল

ক্যারোজেল

এই ক্যারোসেলটি থাকার জন্য দাঁড়িয়ে আছে পাশের মেনু থেকে আমরা যেতে পারি এর প্রতিটি অপশনে ক্লিক করা। তথ্যটি যা বলা হয়েছিল তার চেয়ে বেশি ভালভাবে অর্জন করা প্রত্যাবর্তন প্রভাবের সাথে উপস্থিত হয়।

উল্লম্ব ক্যারোসেল প্রতিক্রিয়া

ক্যারোজেল

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

3 ডি স্প্লিট ক্যারোসেল

বিভক্ত করা

স্লাইডারগুলির প্যাটার্নের সাথে দুর্দান্ত ভিজ্যুয়াল এফেক্ট যা 3 ডি দিয়ে ঘোরে একটি খুব আকর্ষণীয় অ্যানিমেশন। আপনি বাম দিকের মেনু থেকে প্রতিটিগুলির জন্য বিন্দু সহ প্রতিটি বিকল্প নির্বাচন করতে পারেন। এটি কতটা সৃজনশীল তা তালিকার সেরা একটি।


নিবন্ধটির বিষয়বস্তু আমাদের নীতিগুলি মেনে চলে সম্পাদকীয় নীতি। একটি ত্রুটি রিপোর্ট করতে ক্লিক করুন এখানে.

4 মন্তব্য, আপনার ছেড়ে

আপনার মন্তব্য দিন

আপনার ইমেল ঠিকানা প্রকাশিত হবে না। প্রয়োজনীয় ক্ষেত্রগুলি দিয়ে চিহ্নিত করা *

*

*

  1. ডেটার জন্য দায়বদ্ধ: মিগুয়েল অ্যাঞ্জেল গাটান
  2. ডেটার উদ্দেশ্য: নিয়ন্ত্রণ স্প্যাম, মন্তব্য পরিচালনা।
  3. আইনীকরণ: আপনার সম্মতি
  4. তথ্য যোগাযোগ: ডেটা আইনি বাধ্যবাধকতা ব্যতীত তৃতীয় পক্ষের কাছে জানানো হবে না।
  5. ডেটা স্টোরেজ: ওসেন্টাস নেটওয়ার্কস (ইইউ) দ্বারা হোস্ট করা ডেটাবেস
  6. অধিকার: যে কোনও সময় আপনি আপনার তথ্য সীমাবদ্ধ করতে, পুনরুদ্ধার করতে এবং মুছতে পারেন।

  1.   মায়রা ওরেলানা তিনি বলেন

    শুভ সকাল, আমি আমার সাইটে খাঁটি সিএসএস কারাউসেলটি ব্যবহার করতে চাই, তবে এটি কেবলমাত্র একটি অবস্থানে অবস্থিত, কীভাবে আমি এটি আমার পৃষ্ঠার মধ্যে চাই এমন অবস্থানে স্থাপন করতে পারি।

    দয়া করে এটি আপনার সহায়তা করুন। আপনাকে অনেক ধন্যবাদ

  2.   জাভিয়ের কাইজারেস তিনি বলেন

    আমি কীভাবে আমার ওয়েবসাইটের মোবাইল সংস্করণে হোভার ক্যারোসেল প্রদর্শন করতে পারি?

  3.   গ্যাব্রিয়েল তিনি বলেন

    দুর্দান্ত, তারা কী ভাল কাজ করেছে!

  4.   টনি জাম্ব্রানো তিনি বলেন

    হ্যালো, ক্যারিজের বাড়িগুলি খুব দুর্দান্ত, তবে আমি এটি আপলোড করার সাথে সাথেই আমি এটি অনুলিপি করে আটকিয়ে দেব, জাভাস্ক্রিপ্টটি আমার ভেরি ম্যাক্স = $ ('# সি> ল) এর কারণে একটি ত্রুটি দেয় leng আপনি কি পরামর্শ দিচ্ছেন?