Bước 1: Hiển thị đúng dữ liệu trên website.
Template code:
div id="logo">
{d:block module="postadvertise" pos="2" thumb="0x120"}
div class="cellAuto">a href="data.link}" class="dzoom">data.picture}/a>/div>
{d:/block}
/div>
Trong đó:{d:block module="postadvertise" pos="2" thumb="0x120"}
div class="cellAuto">a href="data.link}" class="dzoom">data.picture}/a>/div>
{d:/block}
/div>
module: là khóa dành cho dữ liệu của banner, phải nhập chính xác postadvertise
pos: loại banner hiển thị trên website, giá trị này được quy định trong phần quản trị.
Ví dụ trong phần quản lý Quản lý website -> Quản lý Banner có các dữ liệu sau:
Bước 2: Gắn code và cấu hình để slide các dữ liệu ở bước 1.
Chúng ta sử dụng Plugin Slick để thực hiện slide banner do đó thêm vào
Javascript code:
script>
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(){
$("#logo").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 đó: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(){
$("#logo").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>
idlogo: 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 sile 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.
Trên cùng 1 website có thể đặt nhiều code slide khác nhau (mỗi code cho 1 dữ liệu)
