CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3slideshow
Jessica
Jessica

Reputation: 143

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>

Upvotes: 0

Views: 569

Answers (1)

castletheperson
castletheperson

Reputation: 33486

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>";

Upvotes: 2

Related Questions