Feature Carousel 2 is an elegant and customizable jQuery plugin to create SlideShow Carousel in webpage, with images and Text /caption. The images and their caption can be displayed in LightBox too.


• To DOWNLOAD this script, click: (1 MB).

Example SlideShow Feature Carousel 2

Here is an example this Image SlideShow Carousel jQuery plugin (this example is also in the archive with the script).
- When the mouse cursor is over an image, the carousel stops.

Installation

1. First, to use this plugin, copy the jq_carousel folder with all its files on your server. The script comes with jQuery 1.10.2, with Migrate Addon; so, it is indicated to use this file with jQuery library.
2. Include these files in your web page: jQuery library, the Feature Carousel jQuery plugin, and Feature Carousel css file.
<link rel="stylesheet" type="text/css" href="jq_carousel/feature_carousel.css" />
<script type="text/javascript" src="jq_carousel/jquery.js"></script>
<script type="text/javascript" src="jq_carousel/feature_carousel.js"></script>
3. Create a <div> with id="jq_carousel". Then, in this container add DIVs with class="carousel_elm", each DIV with an image, and optional a text /caption to this image. The IMG tag must hsve class="carousel_img", and the text-content into an element with class="carousel_caption" (see the code bellow).
If the image is included into a link (<a> </a>), when the user clicks that image in center, the page with the link will be opened.
- Here is an example with five images:
<div id="jq_carousel">
 <div class="carousel_elm">
  <img class="carousel_img" src="images/sample1.jpg" alt="image 1" />
  <p class="carousel_caption">This area is typically used to display captions associated with the images. They are set to hide and fade in on rotation.</p>
 </div>
 <div class="carousel_elm">
  <a href="#"><img class="carousel_img" alt="Image Caption" src="images/sample2.jpg" /></a>
  <p class="carousel_caption">The background will expand up or down to fit the caption. This image is added into an &lt;a href=&quot;#&quot;&gt; &lt;/a&gt; element.</p>
 </div>
 <div class="carousel_elm">
  <img class="carousel_img" alt="Image Caption 2" src="images/sample3.jpg" />
  <p class="carousel_caption">Small Images can be placed here as well.</p>
 </div>
 <div class="carousel_elm">
  <a href="https://coursesweb.net/" title="CoursesWeb.net"><img class="carousel_img" alt="images Caption 3" src="images/sample4.jpg" /></a>
  <p class="carousel_caption">When click on this image, a link will be opened.</p>
 </div>
 <div class="carousel_elm">
  <img class="carousel_img" alt="Image Caption 4" src="images/sample2sample2.jpg" />
  <p class="carousel_caption">The background color of the caption area can be changed using CSS. The opacity can be changed in the options, but it will also change the opacity of the text.</p>
 </div>
</div>
4. Then, initiated the carousel script, with the featureCarousel() method to the element that contains the images /content for slideshow-carousel, like in the following example.
- The carousel function takes in just one paremeter: a javascript object with options to customize the slideshow: auto-play, carousel dimensions, images dimensions, lightbox. The list of all the available options are in the "index.html" page.
<script type="text/javascript">
$(document).ready(function() {
  // calls the featureCarousel() method to the element that contains the images /content for slideshow-carousel
  $("#jq_carousel").featureCarousel({
    //add   option: value
    autoPlay: 2000,             // sets auto-play slideshow with rotation every 2 seconds
    largeFeatureWidth: 400,     // width of image in center
    largeFeatureHeight: 250,    // height of image in center
    smallFeatureWidth: .42,     // width of the other images (42% of original width)
    smallFeatureHeight: .35     // height of the other images (35% of original height)
//    lightbox: 'image'       // uncomment to display only image in LightBox, set to false to not show LightBox
  });
});
</script>
• This jQuery plugin is an improved version of the Feature Carousel from this page: http://www.bkosborne.com/jquery-feature-carousel

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
jQuery plugin for Image SlideShow Carousel - Feature Carousel 2

Last accessed pages

  1. CSS cursor property - Custom Cursors (4099)
  2. Get Mouse coordinates inside a Div or an Image (10842)
  3. Contact page - CoursesWeb (33644)
  4. Tabs effect with CSS (34298)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (41102)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2156)
  2. Contact page - CoursesWeb (2089)
  3. Tabs effect with CSS (2089)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (688)
  5. Insert, Select and Update NULL value in MySQL (550)