Bootstrap news ticker / slider with jQuery: 3 demos

The Bootstrap news ticker by using jQuery

In this article, I am going to share a nice jQuery plug-in for running news ticker vertically in your web pages. The plug-in is implemented on Bootstrap 3 framework.

The news ticker is auto play as well as supports up/down manual movement. You may scroll any content in up and down direction including text, images etc.

A demo of vertical news ticker

In this demo, the news ticker moves automatically towards down direction. You may set the number of news items at a time, auto play, whether news item should pause on mouse over or not, direction and interval for moving to next items by using the options in the jQuery code:

bootstrap news ticker

See online demo and code

The script for this example:

 

The markup:

 

You can see, three items are displayed as the demo page loaded. The news ticker will pause as you bring the mouse over any news item.

In real time website, you may want to use the bigger interval than 1500 milliseconds. I have used it for demo purpose for showing how it works.

A demo with autoplay off and up/down buttons

As mentioned earlier, you may set the auto play option false, so letting the visitors navigating the news manually by using the up/down icons.

bootstrap news ticker manual

See online demo and code

The markup remains the same for this demo as in above example.

The jQuery code:

 

A demo with images and up direction

In this demo, the images are used with the news text. The direction of the news slider is kept towards up direction while you may navigate manually as well as ticker will move automatically. Have a look:

bootstrap news ticker icons

See online demo and code

The markup for this example:

 

The script:

 

Setting up this news ticker jQuery plug-in

Step 1:

You may download the complete package of the plug-in from the Github website (Credit: gagi270683). You may also get the required JS and CSS files from the demo page (view source).

Step 2:

Include the references of Bootstrap CSS, plug-in CSS, jQuery and plug-in JS files in the head section of web page.

Step 3:

Use the markup and options in jQuery code as used in the demos.