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>
    </ul>
  </div>
</div>

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

$(function(){
  $('#panel').hpanel();
});

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.

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

$('#panel').hpanel({
  duration: 100000
});

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

$('#panel').hpanel({
  padding: 10
});

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

$('#panel').hpanel({
  hover: false
  focus: true
});

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

$('#panel').hpanel({
  stop: true
});

9. Default CSS classes.

$('#panel').hpanel({
  marquee_class: '.marquee',
  content_class: '.content',
  fixed_class: 0
});

10. API methods.

// pause
$('#panel').pause();

// resume
$('#panel').resume();

// switch off
$('#panel').switchOff();

---

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