How to Make Simple Slider Vertical

In the course of my website, still regularly meet the requirements for this type of slider, I used to use a plugin to do this, but most of it does not meet all my requirements as it is very rigid and important is most difficult to add more slider in such sites.

Here is the jquery for slider vertical simple that I often use later. I also do not like the content plugin very much, although it is fast but it makes the site more severe and higher security as well as errors. As many plugins means and as there are many loopholes to let others enter in your system It is for your a web presence rice which does not take too much time.

you create one file named index.html and giving it 1 Div cards carry id is “logo-list”, some often used to demonstrate the partners are presented in the form of 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>

then copy the jquery menu below and paste into the design as part of the “Div”, in this important place declared “# logo-list”, you can create a lot of the same components, set the ID for the different card that is OK, then add 1 to declare in jquery anymore.

Note: you do not know about jquery certainly not know, Jquey run the library is required to declare it.

you add this line into phanneu as not declared, or you can download and include it also

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"));
 
	});
}

ex: I added 1 image slider for products bearing the ID is “list-sp”, we declare one line of code again and like this

Source code

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

Now you add some css to it again is OK, write it border and size limit for it so it will not be broken when the larger picture that the Div tag only

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
 }

When doing this make you wonder, does not know how to figure it is located in the heart of the cards ”

. “I think to be this alignment is not everyone knows.’m Going to guide this part of the article ha. Hope it helps you, I think this is useful, the content is very much in web design, it’s very simple but very effective. If you have any questions you can comment below then, I will answer for, their gain is not much to do a demo for you, your sympathy .

If you copy my post, please remember to link the source to me.

This article is useful for you, press like on my help, encourage writing.

Tags Cloud