Currently, my slider utilizes arrows and dots for navigation. I am looking to enhance it by adding a multi-page directory on the right side of the slider. This directory will have numbered pages, each containing a different set of images in arrays corresponding to the page number.
I'm facing difficulties linking each "01", "02", "03" page to their respective arrays of images. Instead of cycling through sample images as it does now, clicking on each number should bring up a different collection of images into the slider.
I have included a demo here to provide clarity. However, please note that the dot navigation is not operational on the provided link due to technical issues with jsfiddle. Nevertheless, it works fine separately in my text editing software.
What would be the most effective method to achieve this desired effect?
Thank you. https://i.sstatic.net/LNyYX.png
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;
}