Cách Làm Slider Vertical Đơn Giản

Trong quá trình tôi làm website, vẫn thường xuyên gặp những yêu cầu về những slider kiểu này, tôi thường hay dùng plugin để làm điều này, nhưng đa số nó không đáp ứng hết yêu cầu của tôi vì nó rất cứng nhắc và quan trọng là đa số khó thêm vào nhiều slider như vậy trong trang web.

Đây là đoạn jquery để làm slider vertical đơn giản mà tôi thường hay sử dụng sau này. Tôi cũng không thích dung plugin nhiều lắm, mặc dù nó nhanh gọn nhưng nó làm cho trang web trở nên nặng nề hơn và lỗi bảo mật cũng càng cao hơn. Càng nhiều plugin có nghĩa và càng có nhiều kẽ hở để cho người khác thâm nhập vào trong hệ thống của bạn.Nó tạo được cho bạn một gaio diện web đep mà không mất quá nhiều thời gian.

các bạn tạo 1 file tên là index.html và tạo cho nó 1 thẻ Div mang id là “logo-list”, mấy cái này thường dùng cho trình diễn các đối tác được thể hiện dưới dạng logo.

Source code

<ul id="logo-list">
<li><img alt="" src="images/1.jpg" /></li>
<li><img alt="" src="images/2.jpg" /></li>
<li><img alt="" src="images/3.jpg" /></li>
</ul>

sau đó copy đọn jquery dưới đây paste vào phần kế dưới của thẻ “Div” đó, trong phần này quan trọng chỗ khai báo “#logo-list”, các bạn có thể tạo nhiều thành phần giống như vậy, đặt ID cho các thẻ đó khác nhau là OK, rồi thêm 1 hàng khai báo trong jquery đó nữa.

Lưu ý: với các bạn nào chưa biết về jquery chắc hẳn không biết, Jquey chạy được thì bắt buộc phải khai báo thư viện cho nó.

các bạn thêm dòng này vào trong phầnnếu như chưa khai báo, hoặc các bạn có thể download về và include nó vào cũng được

và đây là đoạn jquery slider vertical đây:

Source code

$(document).ready(function()
{
	scroller('#logo-list')
})
function scroller(ids)
{
	//cache the ticker
	var ticker = $(ids);
 
	//wrap dt:dd pairs in divs
	ticker.children().filter("dt").each(function()
	{
 
	  var dt = $(this),
		container = $("<div>");
 
	  dt.next().appendTo(container);
	  dt.prependTo(container);
 
	  container.appendTo(ticker);
	});
 
	//hide the scrollbar
	ticker.css("overflow", "hidden");
 
	//animator function
	function animator(currentItem)
	{
 
	  //work out new anim duration
	  var distance = currentItem.height();
		duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;
 
	  //animate the first child of the ticker
	  currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
 
		//move current item to the bottom
		currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
 
		//recurse
		animator(currentItem.parent().children(":first"));
	  }); 
	};
 
	//start the ticker
	animator(ticker.children(":first"));
 
	//set mouseenter
	ticker.mouseenter(function()
	{
 
	  //stop current animation
	  ticker.children().stop();
 
	});
 
	//set mouseleave
	ticker.mouseleave(function()
	{
 
	  //resume animation
	  animator(ticker.children(":first"));
 
	});
}

vd : ta thêm 1 slider cho ảnh các sản phẩm mang ID là “list-sp” thì ta khai báo thêm 1 dòng code nữa và như thế này đây

Source code

$(document).ready(function()
{
scroller('#logo-list');
scroller('#list-sp');
})

Bây giờ các bạn cho thêm chút css cho nó nữa là OK, viết cho nó có border và giới hạn kích thước cho nó lại để nó đừng có bị bể khi ảnh lớn hơn cái thẻ Div đó thôi

Source code

#logo-list{ 
width:200px;
height:300px;
padding:10px;
border:1px solid #000; 
}
 #logo-list li{ 
	height:100px; 
	width:200px;
 	text-align:center;
 }
 #logo-list li img{
 	max-height:100px;
 	max-width:200px
 }

Khi làm bài này chắc các bạn sẽ thắc mắc không biết làm như thế nào để hình nó nằm trong trung tâm của thẻ ”

Mình nghĩ để căn chỉnh được cái này không phải ai cũng biết đâu. Mình sẽ hướng dẫn phần này trong bài sau đi ha.Mong nó giúp ích cho các bạn, mình nghĩ cái này rất hữu dụng đó, dung rất nhiều trong thiết kế web, nó rât đơn giản nhưng hiệu quả lắm đó. Nếu có thắc mắc các bạn comment bên dưới nhé, mình sẽ giải đáp cho, thời gain của mình không nhiều nên không làm demo cho các bạn được, các bạn thông cảm.

Nếu các bạn có copy bài viết của tôi hãy nhớ để link nguồn đến tôi nhé.
Bài viết có ích cho bạn thì nhấn like ở trên giúp tôi, khuyến khích tinh thần viết bài.

Tags Cloud