Simple jQuery Carousel Slider For Featured Content
File Size: | 463KB |
---|---|
Views Total: | 15935 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.