Jessica Jessica - 6 months ago 39
CSS Question

Image counter on slideshow (1/5)

Im new to web development I have a question on how to create an image counter and how I can style it. Here is an example of the section of the page

When you click the arrows another image will appear. As so.

I have a placeholder text for now of 01/05 which is styled but I would like to know how can I actually make that into a counter with the same style. Any help would be much appreciated. Also, I am using Bootstrap.

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
showDivs(slideIndex += n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>

<div class="container">
<div class="col-md-6 col-xs-12">
<img src="images/Flat-iPhone-5C-Mock-Up.png" class="iphone mySlides">
<img src="images/Flat-iPhone-5C-Mock-Upblue.png" class="iphone mySlides" style="display:none">
<img src="images/Flat-iPhone-5C-Mock-Upred.png" class="iphone mySlides" style="display:none">
<img src="images/Flat-iPhone-5C-Mock-Upwhite.png" class="iphone mySlides" style="display:none">
<img src="images/Flat-iPhone-5C-Mock-Upyellow.png" class="iphone mySlides" style="display:none">
</div>
<div class="col-md-6 col-xs-12 first_heading">
<h1>Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, </br>
sed do eiusmod tempor incididunt ut labore et dolore </br>
magna aliqua. Ut <b>enim ad minim</b> veniam, quis </br>
nostrud exercitation ullamco laboris nisi </br>
ut aliquip ex ea commodo consequat.</p>
<button>Learn More</button>
<p class="slides">
<b>01/05</b>
</p>
<p class="arrows">
<a onclick="plusDivs(-1)"> <span class="glyphicon glyphicon-menu-left fa-2x" aria-hidden="true"></span></a>
<a onclick="plusDivs(+1)"><span class="glyphicon glyphicon-menu-right fa-2x" aria-hidden="true"></span></a>
</p>
</div>
</div>

Answer

Inside of showDivs, you can set the innerHTML of the slides element:

var counter = document.getElementsByClassName("slides")[0];
counter.innerHTML = "<b>" + slideIndex + "/" + x.length + "</b>";