Infinite Looping Scroller Plugin With jQuery - loopmovement

loopmovement is a really simple jQuery scroller plugin that scrolls vertically or horizontally through a series of html content in a fixed height container. Similar to the carousel or traditional marquee element.

Basic usage:

1. The Html structure for the scroller.

<div id="box">
  <div id="inner">
    <div class="content">Item 1</div>
    <div class="content">Item 2</div>
    <div class="content">Item 3</div>
    ...
  </div>
</div>

2. The basic CSS styles for the scroller.

#box {
  position: relative;
  height: 300px;
  width: 500px;
  overflow: hidden;
}

#inner { position: absolute; }

.top { top: 0px; }

.bottom { bottom: 0px; }

.left { left: 0px; }

.right { right: 0px; }

.content {
  width: 460px;
  height: 300px;
  background: #34BC9D;
  font-size: 50px;
  color: #fff;
  line-height: 300px;
  padding: 0 20px;
}

3. Include the needed jQuery library and the jQuery loopmovement plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.loopmovement.min.js"></script>

4. Enable the plugin.

$('#inner').loopmovement({

  // top, right, bottom, left
  'direction':'top', 

  // animation speed
  'speed':20 
  
});

---

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