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>
    <div class="item">
      Item 2
    </div>
    <div class="item">
      Item 3
    </div>
    <div class="item">
      Item 4
    </div>
    <div class="item">
      Item 5
    </div>
    ...
  </div>
</div>

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="/dist/grouploop.min.js"></script>

3. Activate the marquee scroller on document ready.

$('#example').grouploop();

4. Activate the marquee scroller on document ready.

$('#example').grouploop();

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;
}

.item.active { background: #C0392B; }

.item.active a { color: #fff; }

@media (min-width: 768px) {

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

}

6. Available configs to customize the marquee scroller.

$('#grouploop-example').grouploop({

  // 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
  
});

Changelog:

2018-08-24

• 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.