Responsive Marquee Scroller In jQuery - groupLoop

File Size: 55.9 KB
Views Total: 9960
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Marquee Scroller In jQuery - groupLoop

groupLoop is a lightweight jQuery marquee plugin that helps you create responsive, automatic, smoothly scrolling ticker, carousel, horizontal scroller on the webpage.

Supports autoplay, pause on hover, configurable animation speed, forward/backward, and more.

How to use it:

1. Add as many items to the scroller following the html structure like this:

<div class="example-carousel" id="grouploop-example">
  <div class="item-wrap">
    <div class="item active">
      Item 1
    <div class="item">
      Item 2
    <div class="item">
      Item 3
    <div class="item">
      Item 4
    <div class="item">
      Item 5

2. Add jQuery JavaScript library and the jQuery groupLoop plugin to the webpage.

<script src="" 
<script src="/dist/grouploop.min.js"></script>

3. Activate the marquee scroller on document ready.


4. Activate the marquee scroller on document ready.


5. The example CSS for the marquee scroller.

.promo-carousel {
  border-bottom: 1px solid #eee;
  padding-bottom: 0;
  overflow: hidden;

.promo-carousel .item-wrap {
  transform: translateX(0px);
  width: 400%;
  position: relative;
  white-space: nowrap;
  display: flex;

.item {
  background: #222;
  border-right: 1px solid #eee;
  text-align: center;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;

.item a {
  text-decoration: none;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  line-height: 1.4;
  height: 100%;
  padding: 10px 0;
} { background: #C0392B; } a { color: #fff; }

@media (min-width: 768px) {

.promo-carousel .item-wrap { width: 200%; }


6. Available configs to customize the marquee scroller.


  // animation speed
  velocity: 2,

  // false = from left to right
  forward: true,

  // default selectors
  childNode: ".item",
  childWrapper: ".item-wrap",

  // enable pause on hover
  pauseOnHover: true,

  // stick the first item
  stickFirstItem: false,

  // callback
  complete: null



  • Changed window width triggers to accomodate iPad

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