ThuonghieuOnline.vn   | Liên hệ |  Hotline 0908.622.880
Đăng nhập Đăng ký website 
DÙNG THỬ

Code Slide Logo/Banner trên website

Code dùng để slide banner hoặc logo trên website

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 Banner
Để 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.
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 đó:
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:
Quản lý Banner
Như vậy có 2 banner được nhập cho vị trí có pos=5

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 đó:
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)


Các tin khác
CÔNG TY TNHH THƯƠNG MẠI DỊCH VỤ THƯƠNG HIỆU TRỰC TUYẾN
Bùi Văn Ba, Quận 7, Tp.HCM 
Số CNKD: 0310575921 - Ngày cấp: 12/01/2011 - Nơi cấp: Tp.HCM
Phone: 0908.622.880 - Email: info@thuonghieuonline.vn
Số Hotline
Icon Zalo