同時具有導航和子導航的jQuery滑塊

Question

目前我有一個通過使用箭頭和點進行導航的滑塊。但是，我想在滑塊的右側添加一個附加組件，該滑塊用作滑塊的多頁目錄，以便通過在頁面的每個相應編號中包含附加數組圖像的編號頁面進行選擇。

我無法將「01」頁面鏈接到每個單獨的圖像數組。因此，點擊「01」，「02」，「03」將成爲滑塊中圖像陣列的不同集合。而是我現在的方式，只是循環通過示例圖像。

我添加了演示http://jsfiddle.net/R77EB/3000/希望澄清任何令人困惑的事情，但是jsfiddle沒有點導航操作，因爲我似乎無法在jsfiddle上工作，但它在我的文本編輯軟件中運行良好。

什麼是最有效的方法來實現這種效果？

謝謝。

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

我在堆棧溢出時無法獲得答覆。但我沒有得到從另一個論壇一些幫助，以解決這個問題，在這裏你可以在這裏閱讀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; 
    }