I have implemented a mix of bootstrap 3 and manual coding for my project.
While the image thumbnails function correctly when clicked, the span arrows do not navigate to the next or previous images as intended.
Below is the code snippet:
var maximages = 6;
var startpath = "imgs"
var extension = ".jpg"
function calcslide(x) {
var currentimage = document.getElementById("bigpic").src;
var dotat = currentimage.indexOf(extension);
var stringnumber = currentimage.substr(dotat - 2, 2);
var nextnum = parseInt(stringnumber) + x;
if (nextnum < 1) {
nextnum = maximages;
}
if (nextnum > maximages) {
nextnum = 1;
}
var twodigitnum = ("0" + nextnum).slice(-2);
var showimg = startpath + twodigitnum + extension;
showbig(showimg);
}
function showbig(pic) {
document.getElementById("bigpic").src = pic;
}.slider {
text-align: center;
}
#bigpic {
height: 500px;
}
.thumbs img {
height: 100px;
padding: 20px 0 20px 0;
} <div class="slider">
<span class="glyphicon glyphicon-chevron-left btn btn-lg" alt="previous" onclick="calcslide(-1)"></span>
<img src="imgs/slider01.jpg" id="bigpic" />
<span class="glyphicon glyphicon-chevron-right btn btn-lg" alt="next" onclick="calcslide(1)"></span>
<div class="thumbs">
<span class="glyphicon glyphicon-chevron-left" alt="previous" onclick="calcslide(-1)"></span>
<img src="imgs/slider01.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider02.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider03.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider04.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider05.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider06.jpg" onclick="showbig(this.src)" />
<span class="glyphicon glyphicon-chevron-right" alt="next" onclick="calcslide(1)"></span>
</div>
</div>