jquery vticker (vertical news ticker)

I want to share with you my jquery plugin. I have made this plugin for easy and simple vertical news automatic scrolling.
It will calculate height automaticaly, so no styling needed (added an option to set height manually). Just grab it and use it – so simple.
Don’t add margin/padding on ul and li tags, try to style elements inside li or around div tag.
This is my first jquery plugin, so if you see something wrong please don’t hesitate and say it to me. All criticism is welcome.

Click here to see example

Now about the plugin and how to use it.

Html structure looks like:

    • some content
    • some content

Javascript code:


There are also few options:

speed – speed of scrolling animation (default 700)
pause – wait time between scrolling (default 4000)
showItems – how many items to show (default 2)
animation – animation of sliding. To fade in/fade out use a value ‘fade’
mousePause – stop scrolling on mouse over (default true)
height – set vTicker container height. Also disables all items auto height calculation. It is usable to remove space gaps between items. (default 0 – it means off)
direction – which direction all items will move. Values are ‘up’ and ‘down’. (default ‘up’)

Example of options usage:

speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'

Using with other plugins

I’ve got a question how to use this plugin with other jquery plugin for Twitter called Tweet! . Tweet! plugin is taking information from twitter and makes a list that can be used with vTicker, but if you try to load simply in $(document).ready({ .. }) it won’t work, because Tweet! plugin loads the list after the document is ready and vTicker won’t have any data to scroll. So you need to use .ajaxStop().



3rd party modifications

In this section you can check modifications done by other users.
  • https://github.com/richhollis/vticker “I’ve modified the vTicker code so that you can manually scroll the next and previous items and turn pause on if say you are hovering over the next/previous buttons.” – Rich


I would be grateful if you will donate me, but this plugin is absolutely free!


Copyright 2013 Tadas Juozapaitis

Released under the MIT license: http://www.opensource.org/licenses/mit-license.php


Click here to download

 Or check at github

353 thoughts on “jquery vticker (vertical news ticker)

  1. Is there a way to change the settings after initialization? For example, I initially display the ticker with ‘showItems : 1′ but if they click an expand button I want to show more…

  2. For instance, losing confidence that the novel will be read makes me stop writing, and when I can. It isn’t hard to increase motivation for this type of individual, because generally all that’s required
    is the creation of more responsibility for them. The person may think to themselves, I need motivation to work out, but where can I
    get it from.

  3. This is very nice. However, I want this on a page where I have a jQuery (Amazing Slider) slider which uses jQuery 1.2.6 and the vTicker uses jQuery 1.11.2 . If I try to run both of these the slider will no longer work and the vTicker will work how it is suppose to. There is something conflicting and I hope there is a way to fix this.

  4. Thanks for another informative site. Where else could I am getting that kind of information written in such
    a perfect way? I have a undertaking that I’m just now working on, and
    I’ve been on the glance out for such info.

  5. This is the right site for anyone who wnts to understand this topic.
    Youu rrealize soo much its almost tough to argue with you (not that I personally wiill
    need to…HaHa). You definitely put a new spin on a topic that has been discussed for ages.
    Great stuff, just excellent!

  6. Hi,

    I am using this ticker, its great ticker and works fine, I have one issue how to make this ticker loop back, means once the li’s are finished scrolling, it should start again scroll from beginning. has anyone done this?

  7. Hey, thanks for sharing this plugin, had a little bit of trouble setting it up for a clients website and hooking it up with the CMS system but managed to get it working after 10-15 mins, had the in the wrong place :/

    Nice tutorial and thanks for sharing your hard work with us, nice little plugin.

    Freelance website designer
    Danny Hardy
    Webbro Web Designs

  8. Of course, if you don’t want to go with the lastest trend,
    you can buy or make whatever Halloween costume you want, and
    be whatever you want to be. He broke the preceding Guinness World motorcycle leap
    document by Set off Gumm in 2005. The reason is that tonsils become infected
    and developed into tonsillitis or the pain of

  9. Things thst are really beautiful tto look at, gentle to touch andd that smell excellent are
    ideal for the Pisces on your list. The y trips wass judged for being dry,
    this furnace can puut out along with also the hops peeled off usually the kiln possessing a scuppet, this was significant hardwood frameworked spade
    with a hessian system. A viewer must sign uup for a product or service to watch a video.

  10. Just wish to say your article is as amazing. The clearness for your
    publish is simply great and that i can assume you’re a professional
    in this subject. Well along with your permission allow me to grasp
    your feed to stay updated with forthcoming post.

    Thanks a million and please carry on the rewarding work.

  11. Pingback: 40 Brilliant and Advanced jQuery Effects To Use In Your Websites - Taug13

  12. Hi,

    I have used your ticker on a project that my team is developing right now. The list is created dynamically because the data is from MongoDB. The ticker worked but with an abnormal behavior. The first roll of the ticker shows all the desired data but there are times that it repeats only one part of the list (ex. 1,2,3,4,1,1,1,1,1,1…). What would be the solution for this? I find your ticker very helpful on what I’m doing right now that’s why I need to know if there’s something that you could tell me to fix this. Thank you. BTW..here’s the setup when calling the ticker’s function
    speed: 1000,
    pause: 7000,
    mousePause: true,
    showItems: 1

  13. Pingback: Auto News Scroller Jquery Slideshow Tutorial | autoksk

  14. Pingback: Auto News Scroller Jquery Slideshow Plugin | autoksk

  15. Pingback: Auto News Scroller Jquery Download | autoksk

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>