Infinite-Scrolling Marquee Plugin - jQuery Horizontal-Panel

File Size: 355 KB
Views Total: 4917
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Infinite-Scrolling Marquee Plugin - jQuery Horizontal-Panel

Horizontal-Panel is a jQuery based marquee-like content scroller that infinitely scrolls through a list of HTML content (e.g. breaking news, featured posts, etc) in the horizontal direction.

How to use it:

1. Insert a list of content into the marquee container as follows:

<div id="panel" class="container">
  <div class="marquee">
    <ul class="content">
      <li><h1>Breaking News 1</h1><img src="img/flash-white.png"/></li>
      <li><h1>Breaking News 2</h1><img src="img/flash-white.png"/></li>
      <li><h1>Breaking News 3</h1><img src="img/flash-white.png"/></li>
      <li><h1>Breaking News 4</h1><img src="img/flash-white.png"/></li>
      <li><h1>Breaking News 5</h1><img src="img/flash-white.png"/></li>

2. Download and load the main script horizontal-panel.js after jQuery.


3. Attach the plugin to the top container on document ready.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/horizontal-panel.js"></script>

4. The example CSS to style the scroller.

  bottom: 25px;
  position: absolute;

.marquee, *[class^="marquee"] {
  white-space: nowrap;

.content {
  margin: 0;

.content li {
  color: #fff;
  height: 35px;
  position: absolute;
  list-style-type: none;

.content h1{
  color: white;
  font-family: 'Reckoner';
  letter-spacing: 9px;
  font-size: 2em;
  margin: 0 0 0 0;
  display: inline;
  vertical-align: bottom;

.content img{
  width: 30px;
  padding: 3px 40px 0 35px;

5. Set the animation speed. Default: 10s.

  duration: 100000

6. Set the padding in pixels. Default: 0.

  padding: 10

7. Enable/disable pause on hover/focus. Default: true.

  hover: false
  focus: true

8. Enable/disable infinite looping. Default: false.

  stop: true

9. Default CSS classes.

  marquee_class: '.marquee',
  content_class: '.content',
  fixed_class: 0

10. API methods.

// pause

// resume

// switch off

This awesome jQuery plugin is developed by borjanavarro. For more Advanced Usages, please check the demo page or visit the official website.