SlideShow trình chiếu ảnh với hiệu ứng tuyệt đẹp cho blogspot /blogger

Chào các bạn hôm nay mình có ghé thăm trang NONSTOPVIET.COM thấy có một slideshow ảnh rất đẹp nên mình có mang về để chia sẻ cho những ai cần sử dụng dạng slide này để trình chiếu ảnh, hoặc banner đều rất phù hợp.

XEM DEMO

Với hiệu ứng chuyển động mượt mà, khá nhẹ nhàng và dễ tuỳ biến.

Hướng dẫn cách làm:

Bước 1: Bạn đăng nhập Blogger -> Mẫu -> Nhấn tổ hợp phím Ctrl F và tìm đến thẻ ]]></b:skin sau đó dán đoạn CSS sau lên phía trên

img{max-width:100%}
.sliderz-wrapper{overflow:hidden;width:100%;max-width:1340px;max-height:400px;margin:auto;position:relative;margin-bottom:20px}
.sliderz-entry-list-wrapper{position:relative;width:100%;height:0;padding-top:30%;left:0;transition:.5s all cubic-bezier(0.78,-0.1,0.58,1)}
.sliderz-entry-list{display:flex;justify-content:space-around;position:absolute;width:100%;height:100%;top:0;left:0}
.sliderz-entry{width:33%;height:100%;box-sizing:border-box}
.sliderz-preview-img{width:100%;height:100%}
.sliderz-prev,.sliderz-next{width:50px;height:100%;position:absolute;z-index:2;opacity:.1;transition:.5s all ease-out;cursor:pointer}
.sliderz-next{right:-20px;top:0}
.sliderz-wrapper:hover .sliderz-prev,.sliderz-wrapper:hover .sliderz-next{opacity:1}
.sliderz-prev-btn,.sliderz-next-btn{font-size:40px;position:absolute;top:46%;width:50px;height:50px;z-index:3;color:#fff;transition:.5s all ease-out}
.sliderz-wrapper .sliderz-prev-btn{left:-30px}
.sliderz-wrapper .sliderz-next-btn{right:-30px}
.sliderz-wrapper:hover .sliderz-prev-btn{left:10px}
.sliderz-wrapper:hover .sliderz-next-btn{right:10px}
.sliderz-pick{position:absolute;top:10px;right:10px;display:flex}
.sliderz-pick > .sliderz-number{width:14px;height:14px;margin:4px;background:rgba(255,255,255,0.78);display:block;border-radius:50%;cursor:pointer;transition:.5s all ease-out}
.sliderz-pick > .sliderz-number:hover,.sliderz-pick > .sliderz-number.open{background:#f5003a}

Bước 2: Để hiển thị Slider này bạn sử dụng đoạn Code sau và dán vào nơi muốn hiển thị

<div class="sliderz-wrapper">
<div class="sliderz-prev" onclick="sliderz_goto(-1)"><i class="fa fa-chevron-left sliderz-prev-btn" aria-hidden="true"></i></div>
<div class="sliderz-entry-list-wrapper"><div class="sliderz-entry-list"></div></div>
<div class="sliderz-next" onclick="sliderz_goto(-2)"><i class="fa fa-chevron-right sliderz-next-btn" aria-hidden="true"></i></div>
<div class="sliderz-pick"></div>
</div>
<script>
var slider_entry = [
["title ảnh","Link tới","Link ảnh"],
["title ảnh","Link tới","Link ảnh"],
["title ảnh","Link tới","Link ảnh"],
["title ảnh","Link tới","Link ảnh"]
];


var slider_width = 100; // Chiều rộng slide (%)
var sliderz_time = 2000; // Thời gian chuyển slide (s)
   
var entry = "",pick="", slider_entry_len = slider_entry.length;
for (var i = slider_entry_len-1; i>=0; i--)
{
  entry += '<div class="sliderz-entry" style="width:'+100/slider_entry_len+'%"><a class="sliderz-preview" href="'+slider_entry[i][1]+'" target="_blank"><img class="sliderz-preview-img" src="'+slider_entry[i][2]+'" alt="'+slider_entry[i][0]+'"/></a></div>';
  pick = '<span class="sliderz-number" data-slide-number='+i+' onclick="sliderz_goto(event)"></span>'+pick;
}
var slider_entry_wrapper = document.getElementsByClassName("sliderz-entry-list-wrapper")[0];
slider_entry_wrapper.style.width = slider_entry_len*slider_width + '%';
document.getElementsByClassName("sliderz-entry-list")[0].innerHTML = entry;
document.getElementsByClassName("sliderz-pick")[0].innerHTML = pick;

var slider_wrapper = document.getElementsByClassName("sliderz-wrapper")[0];
var sliderz_timer = setInterval(function(){sliderz_goto(-2);}, sliderz_time);
slider_wrapper.addEventListener("mouseenter", function(){clearInterval(sliderz_timer);});
slider_wrapper.addEventListener("mouseleave", function(){sliderz_timer = setInterval(function(){sliderz_goto(-2);}, sliderz_time);});

var sliderz_goto = (function () {
 var slider_ctrl = document.getElementsByClassName("sliderz-entry-list-wrapper")[0];
 var curpos = 0, range = slider_entry_len, slider_wid=slider_width;
 var pickls = document.getElementsByClassName("sliderz-number");
 return function(pos)
 {
  if (pos==event) curpos = pos.target.dataset.slideNumber;
  else if (pos==-1) { curpos = --curpos%range; curpos=curpos<0?range-1:curpos; }
  else if (pos==-2) curpos = ++curpos%range;
  slider_ctrl.style.left = -curpos*slider_wid+"%";
  for (var i = pickls.length-1; i>=0; i--) pickls[i].classList.remove("open");
  pickls[curpos].classList.add("open");
 }
})();
slider_entry = ""; entry = ""; slider_entry_wrapper = ""; slider_wrapper = ""; pick = ""; 
slider_width = 0; slider_entry_len=0;
</script>

Chỉnh sửa:

title ảnh: tên của ảnh
Link tới: Link hoặc đường dẫn
Link ảnh: Linh ảnh sử dụng định dạng JPG, PNG,...
Chiều rộng slide (%): Phần trăm
Thời gian chuyển slide (s): Giây

Nâng cao:

Để thêm một slide ảnh nữa bạn thêm một code sau vào cùng chỗ title ảnh, link ảnh,...

["title ảnh","Link tới","Link ảnh"],

Kết luận:

Chỉ với vài bước đơn giản bạn đã có một slide trình chiếu ảnh tuyệt đẹp cho website/blog của bạn. Chúc bạn thành công!

Download Here

Live Demo

Download

huhu