Flexible Carousel/Slider Plugin With jQuery - uniCarousel

A responsive, flexible, universe, configurable jQuery carousel/slider plugin to showcase your content in a rotating slider or multi-item carousel.

Features:

• Autoplay.
• Pause on hover.
• x items per slide.
• Horizontal or vertical scrolling.
• Infinite loop.
• And much more.

How to use it:

1. The plugin requireds the latest jQuery library to work.

<script src="/path/to/jquery.min.js"></script>

2. Insert the uniСarousel plugin after jQuery.

<link rel="stylesheet" href="jquery.uni-carousel.css" />
<script src="jquery.uni-carousel.js"></script>

3. The required HTML structure for the carousel/slider.

<div class="uni-carousel">
  <div class="uni-carousel-inner">
    <div class="uni-carousel-inner-limit">
      <div class="uni-carousel-item uni-carousel-item_active">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/1.webp" alt="" />
        </div>
      </div>
      <div class="uni-carousel-item">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/2.webp" alt="" />
        </div>
      </div>
      <div class="uni-carousel-item">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/3.webp" alt="" />
        </div>
      </div>
      <div class="uni-carousel-item">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/4.webp" alt="" />
        </div>
      </div>
      <div class="uni-carousel-item">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/5.webp" alt="" />
        </div>
      </div>
      <div class="uni-carousel-item">
        <div class="uni-carousel-item-inner">
          <img class="uni-carousel-item-media" src="images/6.webp" alt="" />
        </div>
      </div>
    </div>
  </div>
  <a class="uni-carousel-control uni-carousel-control_prev" href="javascript:void(0)" title="Prev"></a>
  <a class="uni-carousel-control uni-carousel-control_next" href="javascript:void(0)" title="Next"></a>
</div>

4. Initialize the plugin to generate a basic carousel/slider.

$('.uni-carousel').uniCarousel();

5. To customize the carousel/slider, override the following options and pass them as an object to the uniCarousel() method.

$('.uni-carousel').uniCarousel({

  // width
  width: 'auto',

  // height
  height: 'auto',

  // the number of items per slide
  count: 3,

  // inverse the direction
  inverse: false,

  // infinite loop
  cycle: true,

  // or 'vertical'
  orientation: 'horizontal',

  // autoplay
  autoplay: false,

  // immediately play on load
  playImmediately: true,

  // pause on hover
  pause: false,

  // animation speed
  time: 600,

  // autoplay interval
  interval: 2000,

  // or 'slider'
  mode: 'carousel',

  // custom controls
  controls:   {
    arrows: {
      position: 'out'
    },
    indicators: {
      position: 'out'
    }     
  }
  
});

---

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