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

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhNql8yl9pcaHh294OalIUkUowp6tVSrywhH8SVJZAoVC71FQyHvZVEgAHeQ1orFJZZxl9ul0hgL77FKtGJTwFlF-TLvMlRfVrt1gXrlotuFaEMJ1UoPeE8deJIXfIxcrDPN3hTPFcLg/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/AVvXsEhMRYGrKgo9kLBBRCqQyWdmN_cwWPJEswOec4eGC5WJO1vgHYI4dEaoassCYE2JfHISbgMxGgMYj23aihqD9eVQtbwidAH6gkOEmH8wVgcNiWTYW7Bwtx_z7SU-2XeoRjpZxqrqc24XUCs/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ả.

Bài viết: Tạo Slide ảnh sử dụng thư viện Slick được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog Slider