Horizontal Text Scroll Bar jQuery Plugin – Simple Marquee

Do you want to add Horizontal Text Scroll Bar on your website to display trending news then in this post I am going to share simple jQuery plugin to integrate marquee features on your website in easy steps so that you’ll easily able to display your important content as Horizontal News Scroll bar. You can also customize news this news scroll bar by following options like speed, additional classes and pause on hover. It is helpful for creating news ticker or Horizontal text scroller.


Integrate Horizontal Text Scroll Bar

Libraries

The plugin is dependent on jQuery core library so include it first after that add plugins JS+CSS lib.

<link rel="stylesheet" href="css/marquee.css" />
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/marquee.js"></script>



HTML

Now create the un-ordered list and place the text which want want to scroll.

<div class="simple-marquee-container">
				<div class="marquee-sibling">
					Trending News
				</div>
				<div class="marquee">
					<ul class="marquee-content-items">
						<li>Item 1</li>
						<li>Item 2</li>
						<li>Item 3</li>
						<li>Item 4</li>
						<li>Item 5</li>
					</ul>
				</div>
			</div>

JS

Finally initialize the plugin and text will start scrolling with default options.

$(function (){
	$('.simple-marquee-container').SimpleMarquee();			
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.