Trong series này:

Thư viện Web phổ biến Bootstrap 5 Tailwind CSS Chart.js — Vẽ biểu đồ Mermaid.js — Sơ đồ từ văn bản anime.js — Animation Three.js — Đồ hoạ 3D trên web Swiper.js — Slider và Carousel
Sửa trang này

Swiper.js — Slider và Carousel

Swiper là gì?

Swiper là thư viện slider/carousel touch-friendly phổ biến nhất hiện nay. Hỗ trợ swipe trên mobile, keyboard navigation, autoplay, lazy loading và hàng chục hiệu ứng chuyển slide.

CDN Swiper v11:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

Cú pháp cơ bản:

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<script>new Swiper('.swiper', { loop: true, pagination: { el: '.swiper-pagination' } });</script>
    Kết quả 
    <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<style>
  * { box-sizing:border-box; margin:0; padding:0; font-family:sans-serif; }
  body { background:#f0f2f5; padding:1.5rem; }

  h4 { color:#555; font-size:.9rem; margin-bottom:.75rem; }
  .section { margin-bottom:1.5rem; }

  /* Hero slider */
  .hero-swiper .swiper-slide {
    height:180px;
    border-radius:10px;
    display:flex; flex-direction:column;
    justify-content:flex-end; padding:1.25rem;
    color:white;
  }
  .hero-swiper .swiper-slide h2 { font-size:1.1rem; margin-bottom:.25rem; }
  .hero-swiper .swiper-slide p  { font-size:.8rem; opacity:.9; }
  .hero-swiper .swiper-pagination-bullet        { background:white; opacity:.6; }
  .hero-swiper .swiper-pagination-bullet-active { opacity:1; }

  /* Card slider */
  .cards-swiper .swiper-slide {
    background:white; border-radius:8px; padding:1rem;
    box-shadow:0 1px 6px rgba(0,0,0,.1); text-align:center;
    height:auto;
  }
  .card-icon { font-size:2rem; margin-bottom:.5rem; }
  .card-title { font-size:.9rem; font-weight:600; color:#333; }
  .card-desc  { font-size:.78rem; color:#888; margin-top:.25rem; }
</style>
</head>
<body>

<div class="section">
  <h4>🖼️ Hero Banner Slider (autoplay)</h4>
  <div class="swiper hero-swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background:linear-gradient(135deg,#4472c4,#6fa3ef)">
        <h2>Học lập trình Web</h2>
        <p>HTML, CSS và JavaScript từ cơ bản đến nâng cao</p>
      </div>
      <div class="swiper-slide" style="background:linear-gradient(135deg,#2ecc71,#27ae60)">
        <h2>Thiết kế giao diện</h2>
        <p>Bootstrap, Tailwind CSS và các pattern UI hiện đại</p>
      </div>
      <div class="swiper-slide" style="background:linear-gradient(135deg,#e74c3c,#c0392b)">
        <h2>JavaScript Framework</h2>
        <p>React, Vue.js và Angular cho ứng dụng SPA</p>
      </div>
      <div class="swiper-slide" style="background:linear-gradient(135deg,#f39c12,#e67e22)">
        <h2>Backend Development</h2>
        <p>Node.js, Express và RESTful API design</p>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

<div class="section">
  <h4>🃏 Card Slider (3 cards visible)</h4>
  <div class="swiper cards-swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><div class="card-icon">🌐</div><div class="card-title">HTML5</div><div class="card-desc">Cấu trúc trang web</div></div>
      <div class="swiper-slide"><div class="card-icon">🎨</div><div class="card-title">CSS3</div><div class="card-desc">Giao diện & animation</div></div>
      <div class="swiper-slide"><div class="card-icon">⚡</div><div class="card-title">JavaScript</div><div class="card-desc">Tương tác & logic</div></div>
      <div class="swiper-slide"><div class="card-icon">⚛️</div><div class="card-title">React</div><div class="card-desc">UI component library</div></div>
      <div class="swiper-slide"><div class="card-icon">💚</div><div class="card-title">Vue.js</div><div class="card-desc">Progressive framework</div></div>
      <div class="swiper-slide"><div class="card-icon">🚀</div><div class="card-title">Node.js</div><div class="card-desc">Server-side JavaScript</div></div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
// Hero slider
new Swiper('.hero-swiper', {
  loop: true,
  autoplay: { delay: 3000, disableOnInteraction: false },
  pagination: { el: '.swiper-pagination', clickable: true },
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
  effect: 'slide',
});

// Cards slider
new Swiper('.cards-swiper', {
  slidesPerView: 2.5,
  spaceBetween: 12,
  centeredSlides: false,
  freeMode: true,
  grabCursor: true,
  breakpoints: {
    480: { slidesPerView: 3.5 }
  }
});
</script>
</body>
</html>

    Bình luận