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

Zalo 0971539681 Tư vấn & Hỗ trợ
Hướng dẫn các bạn cách Tạo Slide ảnh sử dụng thư viện Slick cho blogspot đơn giản, bài viết hướng dẫn cụ thể cách tạo slider ảnh phù hợp cho những bạn không biết nhiều về code.

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

Các bạn có thể xem demo bên dưới


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ả.

Nhận xét

Đăng nhận xét

1 nhận xét
Hiển thị
×