Book báo PR, quảng cáo sản phẩm giá rẻ

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

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

Cập nhật ngày Bở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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt0FKFIy-be_llOFDAkL1zS695fQb0FxCqbzwUJAs-uQQicGb-GR5LAbc2hcc6GOhr16Pj1XeOEpp9SWdmeTiKPUfgdGwMVl5d6aJV4NcRphM7yzOK-VkXw60iEB4QwOQ5SYM2k7tuOMM/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/AVvXsEh_KhgNmSQFumVxw3t6lvYp80bBK8p7d4F6Cfu-49X3-NDySMmYRUFWNcSh_oIU_-VGnYQu5rclvBN9x7RjqrlsVF84639d5sRZy1k2M48YdCfFgeTL_Hc0VZwuXGFAbltv8IyHfbO1-j4/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.