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

Chia sẻ đoạn code slideshow trình chiếu ảnh cho blogspot rất đẹp, phù hợp với cả các website và các mã nguồn mở khác.

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

Hướng dẫn chèn code slideshow trình chiếu ảnh vào blogspot:



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



Để 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!

Tags: