Tạo Slide ảnh sử dụng thư viện Slick

Các bước Tạo Slide ảnh sử dụng thư viện Slick cho blogspot như sau:

Bước 1: Mình dùng thư viện Font làm Icon, các bạn copy dán trước thẻ  đóng </head>

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/>

Bước 2: Thêm CSS trước thẻ đóng </b:skin>


.section-slider .home-slider{border-radius:10px;overflow:hidden}
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}


.slick-slider .slick-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:99;font-family:"Font Awesome 5 Free";font-weight:900;font-size:0;background:#f26d7d;border:1px #f26d7d solid;height:30px;width:30px;transition:0.3s all;opacity:0;overflow:hidden}
.slick-slider .slick-arrow.slick-next{right:-30px}
.slick-slider .slick-arrow.slick-next:before{content:"\f054";font-size:11px;color:#fff}
.slick-slider .slick-arrow.slick-prev{left:-30px}
.slick-slider .slick-arrow.slick-prev:before{content:"\f053";font-size:11px;color:#fff}
.slick-slider .slick-arrow:hover{background:#FFF}
.slick-slider .slick-arrow:hover:before{color:#f26d7d}
.slick-slider:hover .slick-arrow{opacity:1;overflow:visible}
.slick-slider:hover .slick-arrow.slick-next{right:0}
.slick-slider:hover .slick-arrow.slick-prev{left:0}
.slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0}
.slick-list:focus{outline:none}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;left:0;top:0;display:block;margin-left:auto;margin-right:auto}
.slick-track:before,.slick-track:after{content:"";display:table}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{float:left;height:100%;min-height:1px;outline:none;display:none}
[dir="rtl"] .slick-slide{float:right}
.slick-slide img{display:block;width:100%}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}

Bước 3: Thêm đoạn code bên dưới trước thẻ đóng </body>


<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'></script>
<script>
$('.home-slider').slick({
autoplay: true,
autoplaySpeed: 3000,
fade: false,
cssEase: 'linear',
dots: false,
arrows: true,
infinite: true
});
</script>

Bước 4: Thêm HTML vào vị trí cần hiển thị trên blogspot của bạn

<section class='section-slider'>
<div class='home-slider'>
<div class='item'>
<a class='clearfix' href='#LINK' title='Template blogspot Giaodien.blog'>
<img alt='Template blogspot Giaodien.blog' class='img-responsive' src='https://1.bp.blogspot.com/-XMOuz2VcMeg/YOwpk44bKII/AAAAAAAACDA/vdTwvFRZW0Emwu516SDlmjoJo9T9uV3xACLcBGAsYHQ/s16000/slider_1.jpg' />
</a>
</div>
<div class='item'>
<a class='clearfix' href='#LINK' title='Template blogspot Giaodien.blog'>
<img alt='Template blogspot Giaodien.blog' class='img-responsive' src='https://1.bp.blogspot.com/-Htk8qal57Ag/YOwpk8QP45I/AAAAAAAACDE/kOvF3vJq8zU7UizHwzIeQd_ZX_-eYt2tgCLcBGAsYHQ/s16000/slider_2.jpg' />
</a>
</div>
</div>
</section>
Lưu ý blogspot của bạn phải sử dụng thư viện jQuery

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

Sau khi cài đặt xong các bạn lưu lại và kiểm tra kết quả.

Chúc các bạn Thành công! Nếu thấy hữu ích, hãy like và share ! Thanks you.

Đăng nhận xét

Mới hơn Cũ hơn