Minimal Responsive Image Carousel/Slider Plugin With jQuery - Simply Carousel

Simply Carousel is a lightweight and fast jQuery plugin which allows you to build a flexible, responsive image carousel/slider for your featured content.

Features:

• Tiny and easy to implement.
• Adapt, flexible and responsive.
• Auto-rotation when page loads.
• Hover to stop auto-rotation & display navigation arrows.
• Subtle crossfade transitions.

How to use it:

1. Include jQuery JS library together with simplycarousel.js and carousel.css into your document.

<link rel="stylesheet" href="css/carousel.css">

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/simplycarousel.js"></script>

2. Build the Html structure for an image carousel. Add your images into the carousel/slider using CSS background property.

<div class="demo">

  <!-- Carousel container -->
  <div class="carousel-slide" style="background: url(img/image1.jpg) no-repeat 50% 50%; background-size: cover;">
    <div class="caption">Image Caption 1</div>
  </div>
  <div class="carousel-slide" style="background: url(img/image2.jpg) no-repeat 50% 50%; background-size: cover;">
    <div class="caption">Image Caption 2</div>
  </div>
  <div class="carousel-slide" style="background: url(img/image3.jpg) no-repeat 50% 50%; background-size: cover;">
    <div class="caption">Image Caption 3</div>
  </div>
  
  <!-- Arrows navigation -->
  <span class="arrow left select-none">&lt;</span> 
  <span class="arrow right select-none">&gt;</span> 
  
</div>

3. Initialize the plugin on the slide element and done.

$(document).ready(function(){
$('.carousel-slide').sliderArrow();
});

4. The plugin provides 3 basic options to customize the carousel.

$(document).ready(function(){
$('.carousel-slide').sliderArrow({
transition_time : 1000, // animation speed
next_slides : 2500, // animation delay
slideOn :'.carousel-slide.on' // slide on element
});
});

---

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