Học Thiết Kế Website Online Miễn Phí

Tổng hợp kiến thức, tài liệu để bạn học thiết kế website online miễn phí. hướng dẫn học thiết kế website từ đơn giản đến nâng cao một cách hoàn thiện nhất

Liên Kết : Chuyển Nhà Thanh Hóa | Thiết Kế Website | Học Lái Xe OTo Tại Thanh Hóa |Chuyển Hà Hà Nội |

Slide trình diễn ảnh đẹp dành cho blogger

Share Button

Giới Thiệu Slide ảnh tuyệt đẹp dành cho blogger. Trình diễn ảnh đơn giản, mượt mà. Tùy Biến tự động điều chỉnh chiều rộng. Hỗ trợ điện thoại.


Giới Thiệu :

   Slide trình diễn ảnh có chức năng trình diễn nhiều ảnh do bạn quy định trong 1 khung chứa.

   Tự động chuyển sang ảnh khác do bạn quy định.

   Có thể giới thiệu nhiều ảnh một lúc mà không làm mất nhiều không gian trên website của bạn.

Demo ảnh :

Slider trình diễn ảnh đẹp dành cho blogger

Demo trực tiếp : xuanhopsports.com

Ưu điểm : tự động size để phù hợp với kích thước màn hình và khung chứa.

Hướng Dẫn tạo Slide trình diễn ảnh đẹp dành cho blogger

Bước 1 :

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ạn vào Chủ Đề >>> Chỉnh sữa HTML >>> Tìm đoạn mã ]]></b:skin >>> Thêm Code lên trên nó

Ví dụ :

( code ở trên )
]]></b:skin

   Hoặc bạn cũng có thể vào Chủ Đề >>> Tùy Chỉnh >>> Nâng Cao >>> Thêm CSS >>> Thêm code trên vào.

Bước 2 :

  Bạn dán code dưới đây vào chỗ bạn 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 = [
["Tên Ảnh","Link liên kết","link hình ảnh"],
["Tên Ảnh","Link liên kết","Link hình ảnh"],
["Tên Ảnh","Link liên kết","Link hình ảnh"],
["Tên Ảnh","Link liên kết","Link hình ảnh"]
];


var slider_width = 100; // Chiều rộng slide (%)
var sliderz_time = 2000; // Thời gian chuyển slide 1000 = 1 giây
 
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>

Bạn có thể thay đổi nội dung mầu đỏ để phù hợp với website của bạn.

Mặc định slide là 4 ảnh. bạn có thể thêm nhiều ảnh bằng cách thêm tiếp code

["Tên Ảnh","Link liên kết","link hình ảnh"],

Chúc bạn thành công

Share Button

1 Comment

Add a Comment
  1. Cảm ơn bài viết của bạn. Hình ảnh bên ngoài bị lỗi hiển thị rồi.

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Học Thiết Kế Website Online Miễn Phí © 2017 Frontier Theme