Slider là một trong những yếu tố không thể thiếu đối với các trang web bán hàng, dịch vụ, giới thiệu công ty, du lịch,v.v.., hay đơn giản là trang web tin tức, blog các nhân. Có rất nhiều plugin tạo slide trong đó phải kể đến plugin đã rất quen thuộc có tên slick. Bài hôm nay mình sẽ hướng dẫn các bạn cách áp dụng plugin này vào blogspot.
Thật ra thì trang web nhà phát triển plugin cũng đã hướng dẫn kèm demo chi tiết rồi nhưng đó chỉ là demo và được tạo trên HTML còn khi áp dụng vào XML của theme blogspot có một vài chỗ khác biệt.
 |
| Slider bài viết sản phẩm trong theme blogspot bán hàng |
Đầu tiên để tạo được slide bằng slick tất nhiên bạn cần chèn plugin slick theo yêu cầu như thế này
- 2 tệp css chèn trước thẻ đóng </head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css' rel='stylesheet'/>
- 2 tệp js chèn trước thẻ đóng </body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js'/>
Tuy nhiên nếu bạn chèn trực tiếp như vậy sẽ làm giảm hiệu suất tải trang, trang tải chậm hơn không tối ưu. Do đó bạn nên sử dụng JavaScript để load các tệp css,js từ nguồn bên ngoài, chèn trước </body>
<script>//<![CDATA[
// Tạo và append tệp css, js trước thẻ đóng head
function appendChildHead(name, type) {
if (type == 'css') {
var fileref = document.createElement('link')
fileref.setAttribute('rel', 'stylesheet')
fileref.setAttribute('href', name)
} else if (type == 'js') {
var fileref = document.createElement('script')
fileref.setAttribute('type', 'text/javascript')
fileref.setAttribute('async', '')
fileref.setAttribute('src', name)
}
if (typeof fileref != 'undefined') document.getElementsByTagName('head')[0].appendChild(fileref)
}
// Tạo và append tệp js trước thẻ đóng body
function appendChildBody(name, type) {
if (type == 'js')
var src = document.createElement('script')
fileref.setAttribute('type', 'text/javascript')
src.setAttribute('async', '');
src.setAttribute('src', name)
if (typeof src != 'undefined') document.getElementsByTagName('body')[0].appendChild(src)
}
window.addEventListener('load',function(){
appendChildHead('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css','css')
appendChildHead('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css','css')
appendChildBody('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js','js')
})
//]]></script>
<script asysn='asysn' defer='defer' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
Bài đọc nhiều: Cách thêm thuộc tính async hoặc defer vào thẻ script jquery.js
Phần tạo slide cho ảnh rất đơn giản, vì các bạn chỉ cần chèn element của ảnh và tạo slick cho slide ảnh thôi, nhưng đối với dạng slide ảnh trong bài đăng sản phẩm trong theme blogspot bán hàng hay tạo slide cho các bài viết khi sử dụng nguồn cấp lấy dữ liệu lại tương đối phức tạp vì cùng lúc bạn phải tạo hai yêu cầu tạo fuction trích xuất nội dung bài viết từ nguồn cấp blog hiển thị các bài viết và tạo slide sau khi load xong bài viết.
Giả sử mình sẽ áp dụng slide trong bài viết Làm thế nào để tối ưu trang tải nhanh khi tải URL nguồn cấp?, bên dưới hàm function tạo dữ liệu bài đăng
function get_data(e){
var contents=''
$(cate[i]).find('.widet-content').append(contents)
}
Mình sẽ viết thêm hàm fuction slick như sau:
var slider=$(cate[i]).find('.widet-content')
function slick_slider(){
$(cate[i]).find('.row').slick({
slidesToScroll:1,slidesToShow:4,autoplay:true,autoplaySpeed:6000,arrows:true,dots:false,
responsive:[
{breakpoint:769,settings:{slidesToShow:3}},
{breakpoint:640,settings:{slidesToShow:2}},
{breakpoint:480,settings:{slidesToShow:2,autoplay:false,arrows:false}}
]
})
}
function get_data(e){
var contents=''
$(slider).append(contents)
if(slider.hasClass('has-slider'))slick_slider()
}
Các widget nào mà class="widet-content" nếu được thêm class "has-slider" tự động tạo slider
<div class="widget feed-entry" data-category="nhip-song-24h" data-item="12" data-layout="grid" data-type="related posts">
<div class="widget-title"><h3>Chuyên mục 1</h3></div>
<div class="widget-content"></div>
</div>
<div class="widget feed-entry" data-category="chuyen-cua-sao" data-item="12" data-layout="grid" data-type="label posts">
<div class="widget-title"><h3>Chuyên mục 2</h3></div>
<div class="widget-content has-slider"></div>
</div>
Tìm hiểu thêm: https://kenwheeler.github.io/slick/
