NOTE: This post was written nearly 6 years ago initially. I don’t implement this particular solution any longer, but I’m leaving it up in case it points somebody in a useful direction in the future…

I’m using the free version of the WordPress NextGEN gallery, which by the way, is a pretty great plugin.  I wanted to use the slideshow, but wanted to have navigation attached to it.  The slideshow in the free version of NextGEN gallery doesn’t have the navigation.  I particularly like the navigation used in the Superslides jquery plugin.  So for what it’s worth, here’s what I did…

In the plugin file structure, there’s a folder for the modules, the types of “products” that NextGEN has.  Within the nextgen_basic_gallery folder, there’s a templates folder, and there is a slideshow folder in that folder.  This holds the code for the basic slideshow that comes with NextGEN.

Ignoring the “flash output” section, move to the next section of code, commented with “Display JQuery Cycle Slideshow”.  In this section, there is a “for” loop.  This loop is cycling through the images, and writing something for each one.  I changed that to only spit out the <img> tag information, since the Superslides.js plugin doesn’t need any more than that regarding images.  I also surrounded the “for” loop with the <div id=”slides”>[for loop]</div> that Superslides needs.

Additionally I added a div with some style attached to it, and wrapped it around the “slides” div, so that I could use the Superslide inherit_width_from and “inherit_height_from” parameters to constrain the size and location of the slideshow.

After the loop is done, I just tossed in the navigation using “Font Awesome”.  Be sure to include Font Awesome in your master styles.

<nav class="slides-navigation">
 <a href="#" class="next"><i class="fa fa-chevron-right"></i></a>
 <a href="#" class="prev"><i class="fa fa-chevron-left"></i></a>
 </nav>

Next, I tossed in the required Superslides code to make the whole thing work…

<script src="path/to/wp-includes/js/superslides/jquery.easing.1.3.js"></script>
 <script src="path/to/wp-includes/js/superslides/jquery.animate-enhanced.min.js"></script>
 <script src="path/to/wp-includes/js/superslides/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>

<script>
 jQuery(function() {
 jQuery('#slides').superslides({
 inherit_width_from: '.someslideeshow',
 inherit_height_from: '.someslideeshow',
 hashchange: true,
 play: 5000
 });

jQuery('#slides').on('mouseenter', function() {
 jQuery(this).superslides('stop');
 console.log('Stopped')
 });
 jQuery('#slides').on('mouseleave', function() {
 jQuery(this).superslides('start');
 console.log('Started')
 });
 });
 </script>

The result is a navigable, paginated slideshow, utilizing NextGEN’s awesome gallery plugin, but styled with the Superslides navigation that I like.

When NextGEN updates, I’ll need to fix the plugin again, but the work is minimal, as long as you’re comfortable writing minimum PHP and Javascript.  I could probably extend the plugin to take advantage of this new “template”, but I really can’t be bothered to do that at this time.  I’m happy with what I needed to accomplish.  Maybe I’ll do that in the future, to help future-proof the slideshow, and make it available as a NextGEN template for others to use.  We’ll see what kind of time I have, or if it’s worth it to anybody else.

I hope this helps somebody else out there who has the same question I did.