Simple jQuery Carousel Slider For Featured Content

Featured Content Carousel is a fast and lightweight jQuery plugin for creating an Carousel Slider with easing and mouse wheel support to present the featured content of your website. When clicking a slider item, a panel slides our from the left and overlays the other items to display more details.

How to use it:

1. Include the stylesheet in your site or copy and paste the styles into your stylesheet.

<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" />

2. Add the following Html structure to your website and change it to suit your needs.

<div id="ca-container" class="ca-container">

<div class="ca-wrapper">
<div class="ca-item">
<div class="ca-item-main"> <img src="images/01.png" alt="">
<h3> Title 1 </h3>
<p> <span> Description 1 </span> </p>
<div class="ca-more-wrap"><a class="ca-more" href="#">more...</a></div>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6> Subtitle </h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
Content 1
</div>
</div>
</div>

<div class="ca-wrapper">
<div class="ca-item">
<div class="ca-item-main"> <img src="images/02.png" alt="">
<h3> Title 2 </h3>
<p> <span> Description 2 </span> </p>
<div class="ca-more-wrap"><a class="ca-more" href="#">more...</a></div>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6> Subtitle</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
Content 2
</div>
</div>
</div>

div class="ca-wrapper">
<div class="ca-item">
<div class="ca-item-main"> <img src="images/03.png" alt="">
<h3> Title 3 </h3>
<p> <span> Description 1 </span> </p>
<div class="ca-more-wrap"><a class="ca-more" href="#">more...</a></div>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6> Subtitle </h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
Content 3
</div>
</div>
</div>

...

</div>
</div>

3. Include the jQuery library and jQuery Featured Content Carousel plugin on your page. If you're using jQuery 1.9+, make sure to include the jQuery Migrate on the page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script> 

4. Include jQuery easing plugin for easing options.

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 

5. Include jQuery mousewheel plugin for mouse wheel support.

<script type="text/javascript" src="js/jquery.mousewheel.js"></script> 

6. Initialize the plugin.

<script type="text/javascript">
$('#ca-container').contentcarousel({
// speed for the sliding animation
sliderSpeed : 500,
// easing for the sliding animation
sliderEasing: 'easeOutExpo',
// speed for the item animation (open / close)
itemSpeed   : 500,
// easing for the item animation (open / close)
itemEasing  : 'easeOutExpo',
// number of items to scroll at a time
scroll  : 3 
});
</script>

---

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