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'/>

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

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

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV3AQzatFQgcQrUFBjEJZwNBaCSykBjuLQ2P89dRWg2Bk2Pr2CQ4R4uCaICw-VGdgrdDdVhjKh8xcPQu2jJX7ph8RtcvBo14NqRzLtWg4oaPrRxWxDvRnqxqIwGlFPT8-83_9ofIL0TsM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKixikjcBSQBOaOy3spUDo-ggwLDf6uy38OFvOhF4neRYKcDef182FcbnV2JafSGWmnSiRy-FwiFSes_mp8kvg931g7YEplpLrZMgJaTpQEKpxwt6N6a6hbo61Px_2o02wKzYRHAv9rSE/s16000/slider_2.jpg' />
      </a>
    </div>
  </div>
</section>

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