Loading...

How to Make Simple Slider Vertical

View: 971    Dowload: 0   Comment: 0   Post by: hanhga   Category: Javascript   Fields: none

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.

<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

$(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

$(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

 

#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.

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.

Posted on 25-03-2014 

Comment:

To comment you must be logged in members.

Files with category

  • Mini Youtube Using ReactJS

    Mini Youtube Using ReactJS

    View: 237    Download: 3   Comment: 0

    Category: Javascript     Fields: none

    This is one the best starter for ReactJS. MiniYoutube as the name suggests is a youtube like website developed using reactJS and youtube API. This project actually let's you search , play and list youtube videos. Do check it out and start learning...

  • AngularJS and REST API

    AngularJS and REST API

    View: 369    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    This is a tutorial for those interested in a quick introduction to AngularJS and REST API. We will build the familiar Periodic Table of the Elements found in every chemistry textbook, and allow the user to select a Chemical Element by clicking on...

  • Collective Intelligence, Recommending Items Based on Similar Users' Taste

    Collective Intelligence, Recommending Items Based on Similar Users' Taste

    View: 301    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Using Collaborative Filtering to find people who share tastes, and for making automatic recommendations based on things that other people like.

  • Think Like a Bird for Better Parallel Programming

    Think Like a Bird for Better Parallel Programming

    View: 278    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Coding an application to run in parallel is hard, right? I mean, it must be hard or we’d see parallel programs everywhere. All we'd see are slick parallel apps that use every available core effortlessly. Instead multi-threaded apps are the exception...

  • Getting Started with the Bing Search APIs

    Getting Started with the Bing Search APIs

    View: 302    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Bing Search API is a set of REST interfaces that find web pages, news, images, videos, entities, related searches, spelling corrections, and more in response to queries from any programming language that can generate a web request. Applications that...

  • Brief Introduction of SocketPro High Performance and Scalable Persistent Message Queue

    Brief Introduction of SocketPro High Performance and Scalable Persistent Message Queue

    View: 676    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Continuous in-line request/result batching, real-time stream sending/processing, asynchronous data transferring and parallel computation for best performance and scalability

  • Iteration Over Java Collections with High Performance

    Iteration Over Java Collections with High Performance

    View: 279    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Java developers usually deal with Collections such as ArrayList, HashSet, Java 8 come with lambda and streaming API helps us to easily work with Collections. In most cases, we work with few thousands of items and performance isn't a concern. But in...

  • SR2JLIB - A Symbolic Regression Library for Java

    SR2JLIB - A Symbolic Regression Library for Java

    View: 282    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Grammar-Guided Genetic Programming library featuring: multi-threading, just-in-time compilation of individuals, dynamic class loading, and JNI interfacing with C/C++ code

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd