jjcoder

The ‘JJ NextGen JQuery Carousel’ allows you to create a ‘JCarousel’ (http://sorgalla.com/projects/jcarousel/) as a widget or as a shortcode. 
This plugin uses the ‘NextGen Gallery’ plugin for its images.
Requirements:
<ul>
<li>NextGen Gallery Plugin (https://wordpress.org/extend/plugins/nextgen-gallery/)</li>
</ul>
NextGen Gallery Integration:
<ul>
<li>This plugin uses the original width and height of the image uploaded so make sure the images are the correct dimensions when uploaded.</li>
<li>If a width and height are defined under the configuration all images will be resized to those dimensions (Highly recommended).</li>
<li>Alt & Title Text Field: Provide a full url here and the image will link to this. Only works if alt field starts with either of these; /, http, or ftp.</li>
<li>Description Field: Will be used as image alt text. If alt text is present but not a valid url alt text will be used instead for image alt text.</li>
</ul>
You can specify the following parameters:
NOTE: sc means shortcode:
<ul>
<li>Title: Title. Leave blank for no title. (sc: title=”My Carousel”)</li>
<li>Gallery: Leave blank to use all galleries or choose a gallery to use. (sc: gallery=”galleryid”)</li>
<li>Order: Order to display results in. You can choose; Random, Latest First, Oldest First, or NextGen Sortorder. Random will still work when a page is cached. (sc: order=”random”|”asc”|”desc”|”sortorder”)</li>
<li>Shuffle: If order is random and this is true will shuffle images with javascript. Useful if your are caching your pages. (sc: shuffle=”true”|”false”)</li>
<li>Max pictures: The maximum amount of pictures to use. (sc: max_pictures=”6″)</li>
<li>HTML id: HTML id to use. Defaults to ‘jcarousel’. Needs to be different for multiple instances on same page. (sc: html_id=”jcarousel”)</li>
<li>Skin class: Class of skinning to use. Defaults to use the tango skin. (sc: skin_class=”jcarousel-skin-tango”)</li>
<li>Image width: Width of image. Defaults to 75. (sc: width=”200″)</li>
<li>Image height: Height of image. Defaults to 75. (sc: height=”150″)</li>
<li>Image gap: Gap between images. (sc: gap=”5″)</li>
</ul>
JCarousel settings:
Please check the JCarousel home page for more details (http://sorgalla.com/projects/jcarousel/#Configuration).
<ul>
<li>vertical: Specifies wether the carousel appears in horizontal or vertical orientation. Changes the carousel from a left/right style to a up/down style carousel. (sc: vertical=”setting”)</li>
<li>rtl: Specifies whether the carousel appears in RTL (Right-To-Left) mode. (sc: rtl=”setting”)</li>
<li>start: The index of the item to start with. (sc: start=”setting”)</li>
<li>offset: The index of the first available item at initialisation. (sc: offset=”setting”)</li>
<li>size: Size of existing elements if size is not passed explicitly uses the number of total items. (sc: size=”setting”)</li>
<li>scroll: The number of items to scroll by. (sc: scroll=”setting”)</li>
<li>visible: If passed, the width/height of the items will be calculated and set depending on the width/height of the clipping, so that exactly that number of items will be visible. (sc: visible=”setting”)</li>
<li>animation: The speed of the scroll animation as string in jQuery terms (“slow” or “fast”) or milliseconds as integer (See jQuery Documentation). If set to 0, animation is turned off. (sc: animation=”setting”)</li>
<li>easing: The name of the easing effect that you want to use (See jQuery Documentation). (sc: easing=”setting”)</li>
<li>auto: Specifies how many seconds to periodically autoscroll the content. If set to 0 (default) then autoscrolling is turned off. (sc: auto=”setting”)</li>
<li>wrap: Specifies whether to wrap at the first/last item (or both) and jump back to the start/end. Options are “first”, “last”, “both” or “circular” as string. If set to null, wrapping is turned off (default). (sc: wrap=”setting”)</li>
</ul>
Shortcode Examples:
<ul>
<li>[jj-ngg-jquery-carousel html_id=”about-jcarousel” gallery=”1″]</li>
<li>[jj-ngg-jquery-carousel title=”Hello” html_id=”about-jcarousel” gallery=”1″ vertical=”true”]</li>
<li>[jj-ngg-jquery-carousel html_id=”about-jcarousel” gallery=”2″ width=”150″ height=”100″ visible=”2″ scroll=”1″ auto=”3″]</li>
</ul>
Try out my other plugins:
<ul>
<li>JJ NextGen JQuery Slider (https://wordpress.org/extend/plugins/jj-nextgen-jquery-slider/)</li>
<li>JJ NextGen JQuery Cycle (https://wordpress.org/extend/plugins/jj-nextgen-jquery-cycle/)</li>
<li>JJ NextGen Unload (https://wordpress.org/extend/plugins/jj-nextgen-unload/)</li>
<li>JJ NextGen Image List (https://wordpress.org/extend/plugins/jj-nextgen-image-list/)</li>
<li>JJ SwfObject (https://wordpress.org/extend/plugins/jj-swfobject/)</li>
</ul>
<h3>Contributors</h3>

JJ NextGen JQuery Carousel

Allows you to pick a gallery from the 'NextGen Gallery' plugin to use as a 'JQuery JCarousel'.

Aldert Vaandering

NextGen NivoSlider allows you to create a <a href="http://nivo.dev7studios.com/" rel="nofollow ugc">NivoSlider</a> as a widget or with a shortcode. 
This plugin uses the ‘NextGen Gallery’ plugin to obtain the images using tags or gallery IDs.
NivoSlider is a great responsive image slideshow that is highly customizable. With a large array of effects and many additional options you are sure to find a combination that will suit your website.
Requirements:
<ul>
<li><a href="https://wordpress.org/extend/plugins/nextgen-gallery/" rel="ugc">NextGen Gallery Plugin</a></li>
</ul>
Features:
NextGen NivoSlider has been completely overhauled and is continually being added to. It currently supports all the of NivoSlider’s original functions and even has some extra’s!
<ul>
<li>Responsive!</li>
<li>Fully integrated with NextGen gallery</li>
<li>Theme support</li>
<li>Automatic URL linking (put a mailto:, http://, ftp:// or local / into your alt text)</li>
<li>Extra effect(s)</li>
<li>Shortcode and Widget support</li>
<li>Touchscreen support (experimental)</li>
</ul>
Parameters:
You can use the following parameters in the [ngg-nivoslider] shortcode. 
Defaults, where applicable, are shown between parentheses (), available options between brackets [].
<ul>
<li>title: Title for slider. Leave blank for no title. (ex: title=”My Slider”)</li>
<li>gallery: Leave blank to use all galleries or choose a gallery to use. (ex: gallery=”galleryid”)</li>
<li>order [random”|”asc”|”desc”|”sortorder”]: Order to display results in. You can choose; Random, Latest First, Oldest First, or NextGen Sortorder. Random will still work when a page is cached. (ex: order=”random”)</li>
<li>tags: comma separated list of tags to filter results by. (ex: tags=”tag1, tag2″)</li>
<li>shuffle [boolean]: If order is random and this is true will shuffle images with javascript. Useful if your are caching your pages. (ex: shuffle=”true”)</li>
<li>max_pictures: The maximum amount of pictures to load. (ex: max_pictures=”6″)</li>
<li>html_id (“slider”): HTML id to use. Defaults to ‘slider’. Needs to be different for multiple sliders on same page. (ex: html_id=”custom-slider”)</li>
<li>width: Width to use on slider. (ex: width=”200″)</li>
<li>height: Height to use on slider. (ex: height=”150″)</li>
<li>center: Centers content in container. Requires width to be set. (ex: center=”1″)</li>
<li>resize: Resizes the images using TimThumb(v2). Available options are: (ex: resize=”3″) 
 1 – Resize to Fit specified dimensions (no cropping) 
 2 – Crop and resize to best fit the dimensions (default) 
 3 – Resize proportionally to fit entire image into specified dimensions, and add borders if required 
 4 – Resize proportionally adjusting size of scaled image so there are no borders gaps</li>
<li>resizewidth: The width TimThumb will use to resize the image (sc: resizewidth=”800″)</li>
<li>resizeheight: The height TimThumb will use to resize the image (sc: resizeheight=”600″)</li>
<li>resizebg (“ffffff”): The color (denoted in hex) to use for the borders that are generated when using resizing option 3 (ex: resizebg=”a0fb69″)</li>
<li>caption [“alttext”|”description”|”both”]: Show a caption with the slide, showing either the alttext or description as set up in NextGen gallery or both as “Bolded AltText – Description”</li>
<li>htmlcaption: HTML formatted caption to show on all images (ex: htmlcaption=”Title Welcome to <a>this website</a>“)</li>
<li>showgallerytitle [boolean]: Display the gallery title (ex: showgallerytitle=”true”)</li>
<li>showgallerydesc [boolean]: Display the gallery description (ex: showgallerydesc=”true”)</li>
</ul>
Nivo slider settings:
Please check the NivoSlider website for <a href="http://nivo.dev7studios.com/#usage" rel="nofollow ugc">more details</a>.
<ul>
<li>effect: What effect to use as transition. You can specify sets like: ‘fold,fade,sliceDown’. See list below for available effects.(ex: effect=”sliceDown,sliceUp”)</li>
<li>slices: The amount of slices to divide the image to for the slice effects(ex: slices=”3″)</li>
<li>boxCols: Amount of columns to split the image into for the box effects (ex: boxcols=”10″)</li>
<li>boxRows: Amount of row to split the image into for the box effects (ex: boxrows=”8″)</li>
<li>animSpeed: Slide transition speed in milliseconds (1000ms = 1 second). (ex: animspeed=”300″)</li>
<li>pauseTime: Time to pause in milliseconds (1000ms = 1 second) before continueing to the next image (ex: pausetime=”5000″)</li>
<li>startSlide: Set starting Slide. It’s 0-index so use 0 for the first slide. (ex: startslide=”3″)</li>
<li>directionNav [“true”|”false”]: Whether to display the Next & Prev controls or not. (ex: directionnav=”true”)</li>
<li>controlNav [“true”|”false”]: 1,2,3… (ex: controlnav=”setting”)</li>
<li>controlNavThumbs [“true”|”false”]: Use thumbnails for Control Nav if set to true. (ex: controlnavthumbs=”true”)</li>
<li>thumbsWidth: Resize thumbnail to this width. Recommended to set if using thumbnails. (ex: thumbswidth=”20″)</li>
<li>thumbsHeight: Resize thumbnail to this height. Recommended to set if using thumbnails. (ex: thumbsheight=”20″)</li>
<li>thumbsContainerHeight: Height for thumbnails container. Calculation should be ‘number of thumbnail image rows’ x ‘thumbsheight’. (ex: thumbscontainerheight=”20″)</li>
<li>thumbsGap: Gap between thumbnails. (ex: thumbsgap=”5″)</li>
<li>controlNavThumbsFromRel: Use image rel for thumbs. (ex: controlnavthumbsfromrel=”setting”)</li>
<li>controlNavThumbsSearch: Replace this with… (ex: controlnavthumbssearch=”setting”)</li>
<li>controlNavThumbsReplace: …this in thumb Image src. (ex: controlnavthumbsreplace=”setting”)</li>
<li>keyboardNav: Use left & right arrows. (ex: keyboardnav=”setting”)</li>
<li>pauseOnHover: Stop animation while hovering. (ex: pauseonhover=”setting”)</li>
<li>manualAdvance: Force manual transitions. (ex: manualadvance=”setting”)</li>
<li>prexText: Text to display for previous (ex: prevtext=”prev”)</li>
<li>nextText: Text to display for next (ex: prevtext=”next”)</li>
<li>randomStart [“true”|”false”]: Start with a random slide (ex: randomstart=”true”)</li>
<li>captionOpacity: Universal caption opacity. (ex: captionopacity=”setting”)</li>
<li>disableCaptions: (ex: disablecaptions=”1″)</li>
<li>beforeChange: (ex: beforechange=”setting”)</li>
<li>afterChange: (ex: afterchange=”setting”)</li>
<li>slideshowEnd: Triggers after all slides have been shown. (ex: slideshowend=”setting”)</li>
<li>lastSlide: Triggers when last slide is shown. (ex: lastslide=”setting”)</li>
<li>afterLoad: Triggers when slider has loaded. (ex: afterload=”setting”)</li>
</ul>
Nivo Effects:
<ul>
<li>random</li>
<li>sliceDown</li>
<li>sliceDownLeft</li>
<li>sliceUp</li>
<li>sliceUpLeft</li>
<li>sliceUpDown</li>
<li>sliceUpDownLeft</li>
<li>fold</li>
<li>foldReverse</li>
<li>fade</li>
<li>slideInRight</li>
<li>slideInLeft</li>
<li>boxRandom</li>
<li>boxRain</li>
<li>boxRainReverse</li>
<li>boxRainGrow</li>
<li>boxRainGrowReverse</li>
</ul>
Shortcode examples:
<ul>
<li>[ngg-nivoslider html_id=”about-slider”]</li>
<li>[ngg-nivoslider title=”Hello” gallery=”1″ html_id=”about-slider” width=”200″ height=”150″ center=”1″]</li>
<li>[ngg-nivoslider html_id=”about-slider” directionnav=”false” controlnav=”false”]</li>
<li>[ngg-nivoslider tags=slideshow order=”random” effect=”fade” shuffle=”true” max_pictures=”12″ html_id=”slider” resizebg=”fdfdfd” resizewidth=”900″ resizeheight=”620″ resize=”3″ center=”1″ directionNav=”false” controlNav=”false” pauseTime=”10000″ animSpeed=”1000″ pauseOnHover=”false”]</li>
</ul>
<h3>To do</h3>
Feel free to suggest new features or things you’d like to see in this plugin!
<ul>
<li>Create some extra themes.</li>
<li>Scrollable thumbnails?</li>
</ul>

NextGen NivoSlider

This plugin does not taken title attribute in image which is bad for SEO. Also not working with updated version of NextGen gallery plugin. 

didn't work

The NextGen Nivoslider plugin allows you to create a NivoSlider, using images from your NextGen gallery, with a simple shortcode or widget.

JJ NextGen JQuery Carousel vs NextGen NivoSlider