Tự tạo slider với Javascript thuần tuý

I. Giới thiệu

Đa số chúng ta đều lấy các slider có sẵn trên mạng được viết bằng JQuery và tìm cách gắn vào website của mình đúng không cả nhà? Đúng là các chuyên gia viết rất đẹp nhưng không lẽ mình cứ lệ thuộc vào cái có sẵn mãi. Tại sao không thử tự tay tạo ra 1 slider do chính mình viết sử dụng chỉ Javascript và CSS vừa đẹp vừa độc quyền.

Hình chụp

Hôm nay mình đã tạo thành công slider bằng Javascript thuần túy mà không cần đến jQuery. Các bạn có thể xem demo online và tải source bằng 2 link dưới.

Link demo: http://chuyenlaptrinh.net/pages/taoslider/
Link tải source: https://drive.google.com/file/d/0BzQoiVv05yaINWszUTVoVV9uTFU/view?usp=sharing

Giờ mình muốn hướng dẫn các bạn lắp slider của mình vào website các bạn. Còn về source code cũng khá dễ hiểu, chỉ cần bạn nắm chắc javascript căn bản là hiểu cách hoạt động của nó rồi.

II. Hướng dẫn gắn slider vào website

Bước 1: Khai báo thẻ link sau trong thẻ head để sử dụng file slider.css:

<link rel="stylesheet" type="text/css" href="css/slider.css">

Trong file slider.css này các bạn có thể chỉnh lại width, height của slider theo ý muốn nhé.

Chú ý: đường dẫn các bạn có thể khác tùy vào cách bạn đặt file ở đâu mà các bạn tự sửa cho đúng nhé

Bước 2: Khai báo thẻ script sau cuối thẻ body.

<script type="text/javascript" src="js/slider.js"></script>

Chú ý: Phải khai báo cuối thẻ body nếu không sẽ bị lỗi. Đường dẫn các bạn có thể khác tùy vào cách bạn đặt file ở đâu mà các bạn tự sửa cho đúng nhé

Bước 3: Dán đoạn script dưới đây sau thẻ script bạn vừa khai báo

    <script>
        var indexCurrent = 0;      // Chỉ số hình đầu tiên hiển thị ở slide
        var loop = true;  // Bật hoặc tắt lặp lại slide
        var showbutton = true;  // Hiện 2 button điều hướng
        var duration = 4000;   // Thời gian chờ chuyển hình (tính theo đơn vị milisecond)
        initSlider();
    </script>

4 biến indexCurrent, loop, showbutton, duration mình đã chú thích ở trên. Bạn có thể thay đổi tuỳ ý.

Bước 3: Dán đoạn lệnh sau vào nơi bạn muốn đặt slider

<div class="slider-container">
        <div class="slider">
            <img src="images/slide-1.jpg" title="Slide Title 1"    />
            <img src="images/slide-2.jpg" title="Slide Title 2" />
            <img src="images/slide-3.jpg" title="Slide Title 3" />

            <button type="button" onclick="getPrevImage()" class="btn" id="btnPrev">&lt;</button>
            <button type="button" onclick="getNextImage()" class="btn" id="btnNext">&gt;</button>
            <h1 id="titleSlider">Slide Title 1</h1>
        </div>
    </div>

Trong ví dụ slider mình có 4 hình thì mình khai báo 4 thẻ img. Mỗi hình đều có thuộc tính title để hiển thị title của mỗi slide lên slider. Các bạn có thể sửa title và src chỉ đến nơi bạn đặt hình.

Chú ý: đường dẫn src hình các bạn sửa cho đúng đến file hình của các bạn nhé.

Vậy là xong. Kiểm tra xem slider hoạt động chưa nhé. Slider này có ưu điểm là có thể chạy với các loại trình duyệt (kể cả Internet) và mình cũng đã design cho nó hỗ trợ responsive.

Mọi thắc mắc các bạn comment dưới bài viết nhé.

Đừng quên theo dõi đăng ký nhận tin từ blog nhé vì sau này blog sẽ có rất nhiều bài viết hướng dẫn lập trình nhé bạn.