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 type of <input> creates a color well control for selecting a color value?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Which CSS method rotates the HTML element at a given degree?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click on the function that returns the number with the highest value.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Which function prevent the same file from being included more than once in a page?
include() include_once() require()
include_once("some_file.php");
jQuery plugin for Image SlideShow Carousel - Feature Carousel 2

Last accessed pages

  1. PHP getElementById and getElementsByTagName (38533)
  2. PHP Unzipper - Extract Zip, Rar Archives (6065)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (48722)
  4. Get Mouse coordinates inside a Div or an Image (11871)
  5. PHP OOP - Accessor and Destructor methods (1296)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (182)
  2. Register and show online users and visitors (114)
  3. Node.js Move and Copy file (104)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (99)
  5. Read Excel file data in PHP - PhpExcelReader (84)