javascript - Showing number of slides on the web page -

i wrote custom slider shown in codepen:
http://codepen.io/anon/pen/nqqpjg
added feature counts total number of slides moved. example, if total slides 8, starting value this:
slides: 0/8. when 1 slide moves, becomes slides: 1/8 , on. here code:

<div>             <span id="numberslides">0/0 offers</span>         </div>   

js

var slide = new slide('.swiper-slide', {         var totalslides = 10;         var newslide = document.getelementsbyclassname('swiper-slide');         var newvalue = newslide + 1;         document.getelementbyid('numberslides').innerhtml = newvalue + "/" + totalslides + " slides";     });    

but isn't working. how can display number of slides moved?
edit:
slides in these divs:

<div class="swiper-container">         <div class="swiper-wrapper">             <div class="swiper-slide">slide 1</div>             <div class="swiper-slide">slide 2</div>             <div class="swiper-slide">slide 3</div>             <div class="swiper-slide">slide 4</div>             <div class="swiper-slide">slide 5</div>             <div class="swiper-slide">slide 6</div>             <div class="swiper-slide">slide 7</div>             <div class="swiper-slide">slide 8</div>             <div class="swiper-slide">slide 9</div>             <div class="swiper-slide">slide 10</div>         </div>         <!-- add pagination -->         <div class="swiper-pagination"></div>     </div> 

use properties

  runcallbacksoninit: true,    oninit: function(sw){}, //runs callback in initialization   onslidechangeend: function(sw){} //runs callback in slide change end 

demo

var swiper = new swiper('.swiper-container', {    pagination: '.swiper-pagination',    paginationclickable: true,    nextbutton: '.swiper-button-next',    prevbutton: '.swiper-button-prev',    spacebetween: 30,    centeredslides: true,    autoplay: 3000,    autoplaydisableoninteraction: false,    runcallbacksoninit: true,    oninit: function(sw){      var offer = document.queryselector('#numberslides');      offer.innerhtml = (sw.activeindex +  1) + '/' + sw.slides.length + 'offers';    },    onslidechangeend: function(sw){      var offer = document.queryselector('#numberslides');      offer.innerhtml = (sw.activeindex +  1) + '/' + sw.slides.length + 'offers';    }  });

#numberslides{    position: absolute;     bottom: 0;    left: 0;    z-index: 9999;  }    html,  body {    position: relative;    height: 100%;  }    body {    background: #eee;    font-family: helvetica neue, helvetica, arial, sans-serif;    font-size: 14px;    color: #000;    margin: 0;    padding: 0;  }    .swiper-container {    width: 100%;    height: 100%;  }    .swiper-slide {    text-align: center;    font-size: 18px;    background: #fff;    /* center slide text vertically */        display: -webkit-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -webkit-box-pack: center;    -ms-flex-pack: center;    -webkit-justify-content: center;    justify-content: center;    -webkit-box-align: center;    -ms-flex-align: center;    -webkit-align-items: center;    align-items: center;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.1.2/js/swiper.js"></script>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.1.2/css/swiper.css">  <div class="swiper-container">    <div class="swiper-wrapper">      <div class="swiper-slide">slide 1</div>      <div class="swiper-slide">slide 2</div>      <div class="swiper-slide">slide 3</div>      <div class="swiper-slide">slide 4</div>      <div class="swiper-slide">slide 5</div>      <div class="swiper-slide">slide 6</div>      <div class="swiper-slide">slide 7</div>      <div class="swiper-slide">slide 8</div>      <div class="swiper-slide">slide 9</div>      <div class="swiper-slide">slide 10</div>    </div>    <!-- add pagination -->    <div class="swiper-pagination swiper-pagination-clickable"></div>    <div id="numberslides">      0/0 offers    </div>  </div>