Using http://ift.tt/1ci6CfH, load different galleries into this slider

I hope someone can help. I'm new here and have researched this with little progress. I have had some success using nicinabox/superslides and am happy with the way my slider is now functioning. However, I am currently showing 3 images in my slider.

Over the top of this slider is a toggled navigation (show and hide) that is also working successfully.

What I need to do is: from this navigation be able to change the image content of the slider when each of the navigation items is clicked. For each 'gallery' there will be a maximum of 6 images.

This is my html for the images within the slider and controls:

<div id="slides">
        <div class="slides-container">
            <img src="images/slide1_75.jpg" width="1425" height="950">
            <img src="images/slide2_75.jpg" width="1425" height="950">
            <img src="images/slide5_75.jpg" width="1425" height="950">
            <img src="images/slide4_75.jpg" width="1425" height="950">
        </div>

        <nav class="slides-navigation">
            <a href="#" class="next">next</a>

            <a href="#" class="prev">previous</a>
        </nav>
</div>

The first script below shows the javascript controlling my tabbed navigation panel.

<script>
    $(document).ready(function(){
        $(".panelbutton").click(function(){
            if($(".panelbutton a").hasClass('opentab')){
                $(".foot").animate({bottom:'-' + $(".home-content-container-bg").css('height') + 'px'},500);
                $(".panelbutton a").toggle();

            } else {
                $(".foot").animate({bottom:$(".home-content-container-bg").css('height') + 'px'},500);
                $(".panelbutton a").addClass('opentab');
            }   
        });
    });
</script>

The below shows the javascript controlling my slider.

<script>
        $(function() {
          var $slides = $('#slides');

          Hammer($slides[0]).on("swipeleft", function(e) {
            $slides.data('superslides').animate('next');
          });

          Hammer($slides[0]).on("swiperight", function(e) {
            $slides.data('superslides').animate('prev');
          });

          $slides.superslides({
            hashchange: true,
            animation: 'fade',
            play: 10000
          });
        });

</script>

A bit of a newb with javascript and am way out of my depth here - if anyone can help... point me in the right direction or calculate an all out solution, that would be great.

Many thanks