Để 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:
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 trên website{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>
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 đó:/*![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>
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ị website 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:
Kết quả hiển thị khi xem trên điện thoại chiều đứng và xoay ngang:
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)
