Đăng nhập Đăng ký website 
DÙNG THỬ

Slide dữ liệu trên website

Yêu cầu đặt ra là chúng ta có nhiều dữ liệu, trên website chỉ cần hiển thị 1 hoặc 2 dữ liệu, phía dưới có các nút slide để khi nhấn vào thì chuyển qua các dữ liệu khác.
Ví dụ thường thấy nhất là các Banner, có 1 banner rất lớn ở giữa website, khi click vào các nút (hoặc mũi tên 2 bên) thì banner chuyển sang cái khác.

Để slide được dữ liệu cần thực hiện 2 bước sau:
Bước 1: Hiển thị đúng dữ liệu trên website.
Bước 2: Gắn code và cấu hình để slide các dữ liệu ở bước 1.
Trong ví dụ này chúng ta sẽ tiến hành gắn slide cho danh mục sản phẩm theo các bước trên
Bước 1: Hiển thị dữ liệu xem lại phần Code hiển thị danh mục Sản phẩm để hiển thị được các dữ liệu sau:
Danh mục sản phẩm
Bước 2: Gắn code slide để thực hiện chúng ta sẽ điều chỉnh và thêm vào các code sau:
div class="drow tcenter" id="idCategory">
    {d:block module="postproducts-category" loop="3" thumb="450x0"}
    div class="dcol dscol w25 p1">
        div class="image dopacity">a href="data.link}">data.picture}/a>/div>
        h2 class="tcenter mav40">a href="data.link}" class="notlink">data.title}/a>/h2>
        h3 class="tjustify">data.description}/h3>
    /div>
    {d:/block}
/div>
script>
/*![CDATA[*/
dloadscript("DTOOL.SYSTEM_STYLES}jquery.min.js",function(){
    $(document).ready(function(){
        dloadcss(["DTOOL.SYSTEM_STYLES}slick.css"],function(){
            dloadscript("DTOOL.SYSTEM_STYLES}slick.min.js",function(){
                $("#idCategory").slick({
                    centerMode:true, centerPadding:0, rows:1, slidesToShow:3, dots:true, arrows:true,
                    responsive:[{breakpoint:768,settings:{slidesToShow:3}},{breakpoint:480,settings:{slidesToShow:1}}]
                });
            });
        });
    });
});
/*]]>*/
/script>
Màu đỏ là các code mới đã thêm vào so với code để hiển thị danh mục Sản phẩm
Trong đoạn code trên chúng ta đã thêm vào id=”idCategory”, đây là id dùng để phân biệt đoạn code của chỗ này với các đoạn code khác.
Chúng ta sử dụng Plugin Slick để thực hiện slide danh mục do đó đã thêm vào
Javascript code:
script>
/*![CDATA[*/
dloadscript("DTOOL.SYSTEM_STYLES}jquery.min.js",function(){
    $(document).ready(function(){
        dloadcss(["DTOOL.SYSTEM_STYLES}slick.css"],function(){
            dloadscript("DTOOL.SYSTEM_STYLES}slick.min.js",function(){
                $("#idCategory").slick({
                    centerMode:true, centerPadding:0, rows:1, slidesToShow:3, dots:true, arrows:true,
                    responsive:[{breakpoint:768,settings:{slidesToShow:3}},{breakpoint:480,settings:{slidesToShow:1}}]
                });
            });
        });
    });
});
/*]]>*/
/script>
Trong đó:
idCategory: là id mà chúng ta đã khai báo ở trên.
Hàm slick có các thông số cơ bản sau:
slidesToShow: là số dữ liệu hiển thị trên 1 dòng
rows: là số dòng hiển thị trên website, mặc định là 1. Ví dụ {rows:2, slidesToShow:3} nghĩa là dữ liệu sẽ được xếp thành 2 hàng trên mỗi hàng có 3 dữ liệu, mỗi lần slide thì cả 2 hàng này sẽ chuyển thành dữ liệu khác.
dots: có giá trị true hoặc false, dùng để hiển thị hoặc ẩn các nút slide.
arrows: có giá trị true hoặc false, dùng để hiển thị nút slide 2 bên.
responsive: dùng để xác định cấu hình hiển thị tương ứng với từng kích cỡ màn hình.
Ví dụ: {breakpoint:480,settings:{slidesToShow:1}}
Nghĩa là với kích cỡ màn hình nhỏ hơn 480pixel, slide sẽ chỉ hiển thị 1 hình ảnh, giống như khi xem điện thoại nếu quay ngang (kích cỡ màn hình lớn hơn 480) ta sẽ thấy có 3 dữ liệu, để điện thoại đứng (kích cỡ màn hình nhỏ hơn 480) sẽ thấy có 1 dữ liệu.

Kết quả hiển thị trên website:
Slide dữ liệu trên website

Kết quả hiển thị khi xem trên điện thoại chiều đứng và xoay ngang:

Slide dữ liệu trên điện thoại

Tổng kết: với cách trên ta có thể làm slide cho tất cả các loại dữ liệu có trên website, chỉ cần gắn id cho các dữ liệu cần slide và thêm vào đoạn code điều khiển tương ứng.
Trên cùng 1 website có thể đặt nhiều code slide khác nhau (mỗi code cho 1 dữ liệu)


Các tin khác
MẠNG TRUYỀN THÔNG THƯƠNG HIỆU ONLINE
Bùi Văn Ba, Quận 7, Tp.Hồ Chí Minh
Hotline: 0908.622.880 (Mr. Dũng) -  Zalo: 0908622880
Email: info@thietkeweb30s.com
Số Hotline
Icon Zalo