Swiper Slider: Hướng dẫn cài đặt, sự kiện và best practices

Swiper là thư viện slider JavaScript mã nguồn mở (41k GitHub stars), hỗ trợ touch, hardware-accelerated transitions.

Cài đặt Swiper

npm install swiper
hoặc CDN:
<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>

Kích hoạt Swiper

import Swiper from "swiper";
import "swiper/css";
const swiper = new Swiper(".swiper", {
  loop: true,
  pagination: { el: ".swiper-pagination" },
  navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
});

Swiper trong WordPress + ACF Repeater

Best practice từ CODE TỐT: template-parts/swiper.php riêng, nhận dữ liệu từ ACF Repeater.

1. functions.php

function my_theme_assets() {
  wp_enqueue_style("swiper-css", "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css");
  wp_enqueue_script("swiper-js", "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js", [], null, true);
  wp_enqueue_script("theme-swiper", get_template_directory_uri() . "/assets/js/swiper-init.js", ["swiper-js"], null, true);
}
add_action("wp_enqueue_scripts", "my_theme_assets");

2. template-parts/swiper.php

<?php
$slides = $args["slides"] ?? [];
$class = $args["class"] ?? "swiper-default";
$options = $args["options"] ?? ["loop" => true];
if (empty($slides)) return;
?>
<div class="swiper <?= esc_attr($class) ?>" data-swiper-options="<?= esc_attr(json_encode($options)) ?>">
  <div class="swiper-wrapper">
    <?php foreach ($slides as $slide) : ?>
      <div class="swiper-slide">
        <img src="<?= esc_url($slide["image"]) ?>" alt="">
        <h3><?= esc_html($slide["title"]) ?></h3>
      </div>
    <?php endforeach; ?>
  </div>
  <div class="swiper-pagination"></div>
</div>

3. ACF Repeater gọi template part

<?php
if (have_rows("slides")) :
  $slides = [];
  while (have_rows("slides")) : the_row();
    $slides[] = [
      "image" => wp_get_attachment_image_url(get_sub_field("slide_image"), "full"),
      "title" => get_sub_field("slide_title"),
    ];
  endwhile;
  get_template_part("template-parts/swiper", null, [
    "slides" => $slides,
    "class" => "swiper-main-banner",
    "options" => ["loop" => true, "autoplay" => ["delay" => 5000]],
  ]);
endif;
?>

4. assets/js/swiper-init.js

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".swiper[data-swiper-options]").forEach(function (el) {
    try {
      new Swiper(el, JSON.parse(el.getAttribute("data-swiper-options")));
    } catch (e) { console.error("Swiper error:", e); }
  });
});

Cách này đảm bảo: ACF iterate tự do, Swiper khởi tạo tự động qua data attribute, markup tách riêng không phá với template chính.