Responsive Anything Carousel/Scroller Plugin - jQuery Carro

Carro is a jQuery carousel plugin designed to generate responsive horizontal carousels and scrollers capable of handling various content types.

It uses the translateX() CSS function to smoothly move your content left and right on the x-axis. So you have complete control over the animation customization through CSS.

How to use it:

1. Add your content to the Carro container.

<div class="carousel">
  <div class="carousel-tray">
    <img src="1.jpg" alt="">
    <img src="2.jpg" alt="">
    <img src="3.jpg" alt="">
    ...
  </div>
</div>

2. Create pagination links.

<button data-carro="0">0</button>
<button data-carro="1">1</button>
<button data-carro="2">2</button>
...
<button data-carro="first">Go to first</button>
<button data-carro="last">Go to last</button>

3. Create prev/next buttons.

<button data-carro="+1">+1</button>
<button data-carro="-1">-1</button>

4. Initialize the Carro plugin with your desired configuration options.

$('.carousel').carro({

  // selector of carousel controls
  buttons: 'button',

  // active class for carousel controls
  buttonActiveClass: 'button-active',

  // active class for carousel items
  slideActiveClass: 'slide-active',
  
});

5. Apply CSS styles and animations to the Carro.

.carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-tray {
  display: -webkit-flex;
  display: flex;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.carousel-tray img {
  opacity: 0.3;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.carousel-tray img.slide-active {
  opacity: 1;
}

.button-active {
  background: black;
  color: white;
}

6. More configuration options.

$('.carousel').carro({

  // enable auto play
  autoPlay: false,
  interval: 5000,
  
  // fit the container
  fitToLimits: false,
  
  // first item on init
  index: 0,
  
  // or 'center'
  offset: 0,
  
});

---

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