jQuery Slider mit Navigation und Sub-Navigation

Question

Im Moment habe ich einen Schieberegler, der mithilfe von Pfeilen und Punkten für die Navigation funktioniert. Ich möchte jedoch eine zusätzliche Komponente auf der rechten Seite des Schiebereglers hinzufügen, die als mehrseitiges Verzeichnis für den Schieberegler zur Auswahl steht, indem nummerierte Seiten verwendet werden, die ein zusätzliches Array von Bildern in jeder entsprechenden Nummer der Seite enthalten.

Ich habe Probleme beim Verknüpfen der "01" Seite mit jedem einzelnen Array von Bildern. Ein Klick auf "01", "02", "03" wird also zu einer anderen Sammlung von Bildern im Slider. Eher die Art, wie ich sie gerade habe, die sich nur durch Beispielbilder bewegt.

Ich habe eine Demo http://jsfiddle.net/R77EB/3000/ hinzugefügt, um hoffentlich alles zu klären, was verwirrend ist, aber die Jfiddle hat nicht die Punktnavigation funktioniert, weil ich nicht scheinen kann, es funktioniert auf der Jsfiddle, aber es funktioniert gut in meiner Textbearbeitungssoftware.

Was wäre die effizienteste Methode, um diesen Effekt zu erzielen?

Danke.

HTML

<div id="rectangle"> 
    <div class="nav"> 
    <ul> 
     <li class="first"><a href="#">01</a></li> 
     <li class="second"><a href="#">02</a></li> 
     <li class="third"><a href="#">03</a></li> 
    </ul> 
</div> 
</div> 
<div class="image-box"> 
    <img class="p-first" src="img/SampleImage.png" width="300" height="200"> 
    <img class="p-first" src="img/SampleImage.png" width="300" height="200"> 
    <img class="p-first" src="img/SampleImage.png" width="300" height="200"> 
</div> 

<div class="image-box"> 
    <img class="p-second" src="img/SampleImage.png" width="300" height="200"> 
    <img class="p-second" src="img/SampleImage.png" width="300" height="200"> 
    <img class="p-second" src="img/SampleImage.png" width="300" height="200"> 
</div> 

<div class="image-box"> 
    <img class="p-third" src="img/SampleImage.png" width="300" height="200"> 
    <img class="p-third" src="img/SampleImage.png" width="300" height="200"> 
    <img class="p-third" src="img/SampleImage.png" width="300" height="200"> 
</div> 


<nav class="slider-nav"> 
    <div class="nav-list"> 
    <div class="nav-label">Digital</div> 
     <div class="nav-dot select"></div> 
     <div class="nav-dot"></div> 
     <div class="nav-dot"></div> 
     <div class="nav-dot"></div> 
</div> 
<div class="nav-spacing"></div> 
    <div class="nav-list"> 
     div class="nav-label">Physical</div> 
     <div class="nav-dot select"></div> 
     <div class="nav-dot"></div> 
     <div class="nav-dot"></div> 
     <div class="nav-dot"></div> 
    </div> 
</nav> 

jQuery

 $(document).ready(function() { 
     $(".p-first, .p-second, .p-third").hide(); 
    }); 


    $(document).ready(function() { 
     $(".first").click(function() { 
      $(".p-first").toggle(); 
     }); 
    }); 

    $(document).ready(function() { 
     $(".second").click(function() { 
      $(".p-second").toggle(); 
     }); 
    }); 

    $(document).ready(function() { 
     $(".third").click(function() { 
      $(".p-third").toggle(); 
     }); 
    }); 

CSS

#rectangle { 
    position: absolute; 
    top: 226px; 
    left: 691px; 
    height: 561px; 
    width: 996px; 
    border: 1px solid red; 
    opacity: .5; 
} 

.nav { 
    position: relative; 
    top: 25px; 
    left: 1006px; 
} 

li { 
    list-style-type: none; 
    padding: 2px; 
} 

a { 
    text-decoration: none; 
} 

.image-box { 
    position: absolute; 
    top: 226px; 
    left: 691px; 
} 

.slider-nav { 
    position: relative; 
    top: 800px; 
    left: 800px; 
    display: -webkit-flex; 
    -webkit-flex-wrap: nowrap; 
    -webkit-flex-direction: row; 
    -webkit-justify-content: center; 
    -webkit-align-content: stretch; 
    -webkit-align-items: stretch; 
} 

.nav-list { 
    margin: 0; 
    padding: 0; 
    list-style: none 
} 

.nav-label { 
    margin-left: 5px; 
    position: relative; 
    bottom: 2px; 
    font-size: 10px; 
    color: gray; 
    white-space: nowrap; 
    font-family: 'Brandon Grotesque', sans-serif; 
    font-weight: 400; 
    font-size: 10px; 
} 

.nav-spacing { 
    position: relative; 
    top: 5px; 
    width: 1px; 
    height: 26px; 
    margin-left: 10px; 
    margin-right: 10px; 
    background-color: #d8d8d8; 
} 

.nav-dot { 
    width: 10px; 
    height: 10px; 
    margin-right: 3px; 
    margin-left: 3px; 
    padding: 0; 
    display: inline-block; 
    border-radius: 10px; 
    background-color: #E6E7E8; 
    -moz-transition: background-color 0.3s ease-in-out; 
    -o-transition: background-color 0.3s ease-in-out; 
    -webkit-transition: background-color 0.3s ease-in-out; 
    transition: background-color 0.3s ease-in-out 
} 

.nav-dot.select { 
    border: 1px solid red; 
} 

.nav-dot:hover { 
    border: 1px solid #202020; 
} 

Answer 1

Ich konnte hier beim Stack Overflow keine Antwort bekommen. Aber ich habe etwas Hilfe von einem anderen Forum erhalten, um das Problem zu lösen, ist hier, wo Sie den Thread hier lesen http://www.codingforums.com/javascript-frameworks/377190-jquery-slider-both-navigation-sub-navigation.html

Html

<body> 
<div class="my-slider" id="group1"> 
    <ul> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
    </ul> 
</div> 
<div class="my-slider" id="group2"> 
    <ul> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
    </ul> 
</div> 
<div class="my-slider" id="group3"> 
    <ul> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
     <li><img class="img-box" src="img/SampleImage.png"></li> 
    </ul> 
</div> 


<nav class="nav-wrapper"> 
    <div class="first"><a data-id="group1" class="grpsel initial" href="#">01</a></div> 
    <div class="second"><a data-id="group2" class="grpsel" href="#">02</a>  </div> 
    <div class="third"><a data-id="group3" class="grpsel" href="#">03</a> </div> 
</nav> 
</body> 

jQuery

jQuery(document).ready(function ($) { 
     $('.my-slider').unslider(); 
     $(".grpsel").on("click", function() { 
      var grp = $(this).attr("data-id"); 
      $(".unslider").hide(); 
      $("#" + grp).parent().show(); 
     }) 
     $("a.initial").click(); 
    }); 

CSS

 body { 
    } 

    .my-slider { 
     position: absolute; 
     top: 226px; 
     left: 691px; 
     height: 561px; 
     width: 996px; 
     opacity: .5; 
    } 

    .img-box { 
     max-height: 561px; 
     max-width: 996px; 
    } 

    a { 
     text-decoration: none; 
    } 

    .nav-wrapper { 
     position: absolute; 
     top: 250px; 
     right: 200px; 
    } 

    .first, 
    .second, 
    .third { 
     padding-bottom: 5px; 
    }