Các Slider JavaScript Phổ Biến Cho Developer WordPress (Kèm CDN & Demo Code)

Bài viết này dành cho các bạn biết cơ bản về code lập trình còn nếu chưa thì cũng không sao, đã có AI hỗ trợ cho bạn ngay bên dưới.

Khi mới làm quen với WordPress, nhiều developer thường dùng các plugin slider nặng như:

• Revolution Slider link https://www.sliderrevolution.com/ 
• Smart Slider link plugin https://wordpress.org/plugins/smart-slider-3/

Những plugin này tiện nhưng thường làm website chậm và khó tối ưu.

Slider Revolution thường nặng hơn vì quá nhiều cái dư thừa

Trong thực tế, nhiều developer WordPress chuyên nghiệp thường dùng slider JavaScript nhẹ và tích hợp trực tiếp vào theme hoặc template.

Bài viết này sẽ giới thiệu một số slider phổ biến, dễ dùng và phù hợp cho coder WordPress.

1. Swiper

Đây là slider được dùng nhiều nhất hiện nay. Link tham khảo https://swiperjs.com/

Giao diện trang chủ WwiperJs Slider

Ưu điểm

• Không cần jQuery
• Mobile swipe rất mượt
• Có nhiều tính năng:
  • autoplay
  • lazy load
  • navigation
  • pagination

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>

CDN là mạng lưới server phân tán cho phép bạn load các asset tĩnh (CSS, JS, images…) từ node gần user nhất, giúp giảm latency, tăng tốc độ tải và giảm tải cho server gốc.

HTML

<div class="swiper mySwiper">
<div class="swiper-wrapper">

<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>

</div>
</div>

JS

const swiper = new Swiper(".mySwiper", {
loop: true,
autoplay: {
delay: 3000
}
});

2. Splide

Splide là slider rất nhẹ và code sạch, được nhiều dev frontend thích. Link download https://splidejs.com/

Giao diện splidejs slider

Ưu điểm

• nhẹ
• dễ custom
• không cần jQuery

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/js/splide.min.js"></script>

JS

new Splide('.splide', {
type: 'loop',
autoplay: true
}).mount();

3. Glide.js

Glide.js là slider rất gọn và hiện đại. Link tải https://glidejs.com/

Giao diện glidejs

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css">
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>

JS

new Glide('.glide', {
type: 'carousel',
perView: 3
}).mount();

4. Owl Carousel

Owl Carousel từng là slider rất phổ biến trong WordPress. Link tải demo https://owlcarousel2.github.io/OwlCarousel2/

Giao diện OwlCarousel2

Ưu điểm

• dễ dùng
• documentation nhiều

Nhược điểm

• phụ thuộc jQuery

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel@2/dist/assets/owl.carousel.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/owl.carousel@2/dist/owl.carousel.min.js"></script>

JS

$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
items:3
});

5. Slick Slider

Slick Slider là slider rất nổi tiếng trước đây. Link tải https://kenwheeler.github.io/slick/

CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

JS

$('.slider').slick({
autoplay: true
});

6. Cách nhúng CDN Slider vào WordPress

Thay vì nhúng trực tiếp <link> và <script> vào header như HTML thuần,
trong WordPress bạn nên dùng wp_enqueue_scripts để đảm bảo:
– Không bị trùng thư viện
– Load đúng thứ tự (dependency)
– Dễ quản lý và tối ưu hiệu năng
– Tương thích tốt với theme/plugin khác

Copy đoạn code sau bỏ vào functions.php trong theme

/* =========================
   FUNCTIONS.PHP
   Nhúng CDN Slick Slider
   ========================= */

function wpshare247_enqueue_slick_cdn() {

    // Load jQuery (WordPress đã có sẵn)
    wp_enqueue_script('jquery');

    // Slick CSS
    wp_enqueue_style(
        'slick-css',
        'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css',
        array(),
        '1.8.1'
    );

    // (Optional) Slick Theme CSS
    wp_enqueue_style(
        'slick-theme-css',
        'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css',
        array('slick-css'),
        '1.8.1'
    );

    // Slick JS (load ở footer)
    wp_enqueue_script(
        'slick-js',
        'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js',
        array('jquery'),
        '1.8.1',
        true
    );

}
add_action('wp_enqueue_scripts', 'wpshare247_enqueue_slick_cdn');


/* =========================
   INIT SLIDER (JS)
   ========================= */

function wpshare247_slick_init() {
?>
<script>
jQuery(document).ready(function($){
    $('.wpshare247-slider').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: true,
        dots: true,
        responsive: [
            {
                breakpoint: 1024,
                settings: { slidesToShow: 2 }
            },
            {
                breakpoint: 768,
                settings: { slidesToShow: 1 }
            }
        ]
    });
});
</script>
<?php
}
add_action('wp_footer', 'wpshare247_slick_init');

7. Khi nào nên dùng slider JavaScript thay vì plugin WordPress?

Sau hơn nhiều năm làm WordPress, mình gần như chỉ dùng slider JavaScript thay vì plugin trong đa số dự án.

Slider JS nên dùng khi bạn tự code theme, vì bạn kiểm soát được toàn bộ HTML, CSS, JS và không bị phụ thuộc vào logic phức tạp của plugin. Điều này cực kỳ quan trọng khi làm web cho doanh nghiệp, vì mỗi dự án đều cần tùy biến riêng.

Thứ hai là vấn đề hiệu năng. Các plugin slider phổ biến thường kéo theo rất nhiều file CSS, JS dư thừa, thậm chí load cả những tính năng bạn không dùng. Điều này làm tăng dung lượng trang, ảnh hưởng trực tiếp đến tốc độ tải và điểm PageSpeed.

Trong khi đó, dùng Swiper hoặc Splide, bạn chỉ load đúng những gì cần. Code gọn, dễ tối ưu lazy load, defer JS, và kiểm soát hoàn toàn cách render. Kết quả là website nhẹ hơn, load nhanh hơn thấy rõ, đặc biệt trên mobile.

Cuối cùng là khả năng tối ưu lâu dài. Khi dùng plugin, mỗi lần update có thể phát sinh lỗi hoặc xung đột. Còn với slider JS tự viết, bạn làm chủ toàn bộ hệ thống, dễ debug, dễ nâng cấp, và không bị phụ thuộc vào bên thứ ba.

Tóm lại, nếu bạn làm web nghiêm túc, đặc biệt là web doanh nghiệp cần tốc độ và SEO, thì slider JavaScript gần như là lựa chọn nên ưu tiên thay vì plugin.

8. Prompt AI Cho Developer WordPress

Bạn có thể dùng prompt sau để AI tạo slider nhanh.

Bạn là một lập trình viên frontend chuyên WordPress.

Hãy tạo một slider sử dụng thư viện JavaScript hiện đại (Swiper hoặc Splide) với các yêu cầu sau:

* Tương thích với WordPress theme
* Có autoplay
* Có navigation
* Có pagination
* Responsive mobile
* Lazy load hình ảnh
* Code gồm: HTML + CSS + JavaScript

Slider này lấy danh sách bài viết mới nhất

QUY TẮC OUTPUT:

1. Chỉ trả về CODE.
2. Không viết bất kỳ giải thích nào ngoài code.
3. Nếu cần giải thích, hãy viết dưới dạng comment trong code.
4. Code phải tách rõ 3 phần:

   * HTML
   * CSS
   * JavaScript

5. Code phải dễ copy để tích hợp vào WordPress theme
- Code copy và dùng trong functions.php
- Js Css gọi từ wp_head
- Slider js gọi từ wp_footer

Copy prompt sau dùng trong ChatGPT, claude.ai hoặc bất kì AI nào hỗ trợ code

Thử dùng Prompt trên với claude.ai

Kết quả chạy Prompt trên Claude AI

Link tải wordpress-latest-posts-slider.zip

Video kết quả sử dụng PROMPT