Horizontal Carousel

Single Item

The default configuration shows one item at a time:

• 1
• 2
• 3
• 4
• 5
• 6

ContinuousCarousel('myCarousel');

<div id="myCarousel" class="c-carousel-container" data-direction="horizontal" data-num-visible="1">
  <ul class="c-carousel-group">
    <li class="c-carousel-item">1</li>
    <li class="c-carousel-item">2</li>
    <li class="c-carousel-item">3</li>
    <li class="c-carousel-item">4</li>
    <li class="c-carousel-item">5</li>
    <li class="c-carousel-item">6</li>
  </ul>
</div>

Multiple Items

Show 3 items at once:

• 1
• 2
• 3
• 4
• 5
• 6

ContinuousCarousel('myCarousel', { numVisible: 3 });

<div id="myCarousel" class="c-carousel-container" data-direction="horizontal" data-num-visible="3">
  <ul class="c-carousel-group">
    <li class="c-carousel-item">1</li>
    <li class="c-carousel-item">2</li>
    <li class="c-carousel-item">3</li>
    <li class="c-carousel-item">4</li>
    <li class="c-carousel-item">5</li>
    <li class="c-carousel-item">6</li>
  </ul>
</div>

With Pause on Hover

Hover over the carousel to pause it:

• 1
• 2
• 3
• 4
• 5
• 6

ContinuousCarousel('myCarousel', {
  numVisible: 2,
  pauseOnHover: true
});