Minimal Full Width Content Carousel Plugin with jQuery

Makes use of jQuery, modernizr.js and CSS/CSS3 to create a responsive, full-width and infinite-looping content slider (carousel) on your web page/application.

How to use it:

1. Include the jQuery library and modernizr.js in your document.

<script src="modernizr.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

2. Include the jQuery Infinity Carousel plugin's JavaScript and stylesheet in the document.

<link rel="stylesheet" href="css/infinityCarousel.css">
<script src="js/infinityCarousel.js"></script>

3. Insert anything you want into the carousel using the markup structure like this:

<div class="infinity-carousel">

   <!-- prev/next navigation -->
  <button class="nav prev"></button>
  <button class="nav next"></button>

   <!-- main content -->
  <div class="center">
    <div class="slides">
      <div> 
        <!-- anything in here -->
        <div class="img-wrap"><img src="" alt=""></div>
        <h3>Header 1</h3>
        <p class="text">Text 1</p>
      </div>
      <div> 
        <!-- anything in here -->
        <div class="img-wrap"><img src="" alt=""></div>
        <h3>Header 2</h3>
        <p class="text">Text 2</p>
      </div>
      <div> 
        <!-- anything in here -->
        <div class="img-wrap"><img src="" alt=""></div>
        <h3>Header 3</h3>
        <p class="text">Text 3</p>
      </div>
      <div>
        <div class="img-wrap"><img src="" alt=""></div>
        <h3>Header 4</h3>
        <p class="text">Text 4</p>
      </div>
    </div>
  </div>

</div>

4. The plugin will automatically be initialized on page load and you can move the slides left or right by clicking on the prev/next navigation.

---

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