featured, Website

কিভাবে HTML, CSS এবং JavaScript দিয়ে কার্ড স্লাইডার তৈরি করবেন – সহজ গাইড

ServiceArman

কিভাবে HTML, CSS ও JavaScript দিয়ে Card Slider তৈরি করবেন – ধাপে ধাপে গাইড

ওয়েবসাইট ডিজাইনের জগতে কার্ড স্লাইডার এখন একটি জনপ্রিয় ফিচার। আপনি যদি একটি আকর্ষণীয় ওয়েবসাইট তৈরি করতে চান, তাহলে HTML, CSS এবং JavaScript ব্যবহার করে একটি কার্ড স্লাইডার তৈরি করা শিখতে পারেন। এই স্লাইডারগুলো বেশিরভাগ সময় প্রজেক্ট, প্রাইসিং প্ল্যান, অথবা পোর্টফোলিও প্রদর্শনের জন্য ব্যবহৃত হয়। এটি শুধু সুন্দরই নয়, বরং ব্যবহারকারীদের জন্যও সুবিধাজনক। তাই আজকের এই পোস্টে আমি আপনাদের দেখাবো কিভাবে সহজে এই কার্ড স্লাইডার তৈরি করবেন। চলুন শুরু করা যাক!

কার্ড স্লাইডার কেন গুরুত্বপূর্ণ?

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

কি কি লাগবে?

কার্ড স্লাইডার তৈরির জন্য আপনার প্রয়োজন হবে:

HTML: ওয়েব পেজের কাঠামো তৈরি করতে।
CSS: স্লাইডারের ডিজাইন ও লে-আউট সুন্দর করতে।
JavaScript: স্লাইডারের গতিশীলতা এবং বাটনের কার্যকারিতা যোগ করতে।

এই তিনটি টুলস দিয়েই আপনি একটি সম্পূর্ণ কার্ড স্লাইডার তৈরি করতে পারবেন।

লাইভ ডেমো

কোডে ডুব দেওয়ার আগে, আপনি চাইলে আমাদের তৈরি করা স্লাইডারের একটি লাইভ ডেমো দেখতে পারেন। এটি আপনাকে ধারণা দেবে যে শেষ পর্যন্ত আপনার প্রজেক্টটি কেমন দেখাবে।
ডেমো: লাইভ ডেমো দেখুন (লিংক যোগ করুন)

কোড কপি করুন

নিচে আমি পুরো কোডটি একসাথে দিয়ে দিচ্ছি। আপনি এটি কপি করে আপনার এডিটরে পেস্ট করতে পারেন এবং নিজের মতো করে কাস্টমাইজ করতে পারেন।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Slider HTML & CSS</title>
  <!-- Linking Google fonts for icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
  <!-- Linking SwiperJS CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<style>/* Importing Google fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(#ECEFFE, #C5CFFC);
}

.card-wrapper {
  max-width: 1100px;
  margin: 0 60px 35px;
  padding: 20px 10px;
  overflow: hidden;
}

.card-list .card-item {
  list-style: none;
}

.card-list .card-item .card-link {
  display: block;
  background: #fff;
  padding: 18px;
  user-select: none;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  transition: 0.2s ease;
}

.card-list .card-item .card-link:active {
  cursor: grabbing;
}

.card-list .card-item .card-link:hover {
  border-color: #5372F0;
}

.card-list .card-link .card-image {
  width: 100%;
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-list .card-link .badge {
  color: #5372F0;
  width: fit-content;
  padding: 8px 16px;
  font-size: 0.95rem;
  border-radius: 50px;
  font-weight: 500;
  background: #DDE4FF;
  margin: 16px 0 18px;
}

.card-list .card-link .badge-designer {
  color: #B22485;
  background: #F7DFF5;
}

.card-list .card-link .badge-marketer {
  color: #B25A2B;
  background: #FFE3D2;
}

.card-list .card-link .badge-gamer {
  color: #205C20;
  background: #D6F8D6;
}

.card-list .card-link .badge-editor {
  color: #856404;
  background: #fff3cd;
}

.card-list .card-link .card-title {
  color: #000;
  font-size: 1.19rem;
  font-weight: 600;
}

.card-list .card-link .card-button {
  height: 35px;
  width: 35px;
  color: #5372F0;
  margin: 30px 0 5px;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #5372F0;
  transform: rotate(-45deg);
  transition: 0.4s ease;
}

.card-list .card-link:hover .card-button {
  color: #fff;
  background: #5372F0;
}

.card-wrapper .swiper-pagination-bullet {
  height: 13px;
  width: 13px;
  opacity: 0.5;
  background: #5372F0;
}

.card-wrapper .swiper-pagination-bullet-active {
  opacity: 1;
}

.card-wrapper .swiper-slide-button {
  color: #5372F0;
  margin-top: -35px;
}

/* Responsive media query code for small screens */
@media (max-width: 768px) {
  .card-wrapper {
    margin: 0 10px 25px;
  }

  .card-wrapper .swiper-slide-button {
    display: none;
  }
} </style>
</head>
<body>
  <div class="container swiper">
    <div class="card-wrapper">
      <!-- Card slides container -->
      <ul class="card-list swiper-wrapper">
        <li class="card-item swiper-slide">
          <a href="#" class="card-link">
            <img src="https://trickbd.com/wp-content/uploads/2015/08/designer.jpg" alt="Card Image" class="card-image">
            <p class="badge badge-designer">Designer</p>
            <h2 class="card-title">Lorem ipsum dolor sit explicabo adipisicing elit</h2>
            <button class="card-button material-symbols-rounded">arrow_forward</button>
          </a>
        </li>
        <li class="card-item swiper-slide">
          <a href="#" class="card-link">
            <img src="https://trickbd.com/wp-content/uploads/2015/08/marketer.jpg" alt="Card Image" class="card-image">
            <p class="badge badge-developer">Developer</p>
            <h2 class="card-title">Lorem ipsum dolor sit explicabo adipisicing elit</h2>
            <button class="card-button material-symbols-rounded">arrow_forward</button>
          </a>
        </li>
        <li class="card-item swiper-slide">
          <a href="#" class="card-link">
            <img src="https://trickbd.com/wp-content/uploads/2015/08/gamer.jpg" alt="Card Image" class="card-image">
            <p class="badge badge-marketer">Marketer</p>
            <h2 class="card-title">Lorem ipsum dolor sit explicabo adipisicing elit</h2>
            <button class="card-button material-symbols-rounded">arrow_forward</button>
          </a>
        </li>
        <li class="card-item swiper-slide">
          <a href="#" class="card-link">
            <img src="https://trickbd.com/wp-content/uploads/2015/08/editor.jpg" alt="Card Image" class="card-image">
            <p class="badge badge-gamer">Gamer</p>
            <h2 class="card-title">Lorem ipsum dolor sit explicabo adipisicing elit</h2>
            <button class="card-button material-symbols-rounded">arrow_forward</button>
          </a>
        </li>
        <li class="card-item swiper-slide">
          <a href="#" class="card-link">
            <img src="https://trickbd.com/wp-content/uploads/2015/08/developer.jpg" alt="Card Image" class="card-image">
            <p class="badge badge-editor">Editor</p>
            <h2 class="card-title">Lorem ipsum dolor sit explicabo adipisicing elit</h2>
            <button class="card-button material-symbols-rounded">arrow_forward</button>
          </a>
        </li>
      </ul>

       <!-- Pagination -->
      <div class="swiper-pagination"></div>

      <!-- Navigation Buttons -->
      <div class="swiper-slide-button swiper-button-prev"></div>
      <div class="swiper-slide-button swiper-button-next"></div>
    </div>
  </div>

  <!-- Linking SwiperJS script -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <!-- Linking custom script -->
  <script>new Swiper('.card-wrapper', {
    loop: true,
    spaceBetween: 30,

    // Pagination bullets
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        dynamicBullets: true
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // Responsive breakpoints
    breakpoints: {
        0: {
            slidesPerView: 1
        },
        768: {
            slidesPerView: 2
        },
        1024: {
            slidesPerView: 3
        }
    }
});</script>
</body>
</html>

ধাপে ধাপে প্রক্রিয়া

HTML স্ট্রাকচার: প্রথমে একটি কন্টেইনার তৈরি করুন যেখানে কার্ডগুলো থাকবে। প্রতিটি কার্ডে ছবি, টেক্সট বা বাটন যোগ করতে পারেন।
CSS দিয়ে স্টাইলিং: কার্ডগুলোকে সুন্দর করতে রং, ছায়া, এবং অ্যানিমেশন যোগ করুন। স্লাইডারের প্রস্থ এবং উচ্চতাও নির্ধারণ করুন।
JavaScript দিয়ে ফাংশনালিটি: স্লাইডারে বাম-ডান বাটন যোগ করুন এবং ক্লিক করলে কার্ডগুলো স্লাইড করবে।

এই তিন ধাপ অনুসরণ করলেই আপনার কার্ড স্লাইডার প্রস্তুত!

কাস্টমাইজেশনের আইডিয়া

রং পরিবর্তন: আপনার ওয়েবসাইটের থিমের সাথে মিলিয়ে রং ব্যবহার করুন।
অ্যানিমেশন: স্লাইডিং এফেক্টকে আরও মসৃণ করতে CSS ট্রানজিশন ব্যবহার করুন।
মোবাইল ফ্রেন্ডলি: স্লাইডারটি যেন মোবাইলেও ভালো দেখায়, সেজন্য রেসপন্সিভ ডিজাইন করুন।

শেষ কথা

HTML, CSS এবং JavaScript দিয়ে কার্ড স্লাইডার তৈরি করা খুবই সহজ এবং মজার। এটি আপনার ওয়েবসাইটে একটি প্রফেশনাল টাচ যোগ করবে। আপনি যদি একজন শিক্ষানবিশ হন, তাহলে এই প্রজেক্টটি আপনার দক্ষতা বাড়াতে সাহায্য করবে। তাই দেরি না করে আজই এটি তৈরি করে ফেলুন এবং আপনার অভিজ্ঞতা আমাদের সাথে শেয়ার করুন।

শুভ কোডিং!

ebangla

ebangla

কিভাবে HTML, CSS এবং JavaScript দিয়ে কার্ড স্লাইডার তৈরি করবেন – সহজ গাইড

ServiceArman

ServiceArman

Table of Contents

Leave a Reply Cancel reply

কিভাবে HTML, CSS ও JavaScript দিয়ে Card Slider তৈরি করবেন – ধাপে ধাপে গাইড

কার্ড স্লাইডার কেন গুরুত্বপূর্ণ?

কি কি লাগবে?

লাইভ ডেমো

কোড কপি করুন

ধাপে ধাপে প্রক্রিয়া

কাস্টমাইজেশনের আইডিয়া

শেষ কথা