title: Shorten the easypagination page display length
body: <p>I have a code were i used easypagination for pagination process but the issue which i am facing is, when the 'elementsPerPage' property is reduced to lesser number, the width of pagination increases but </p>
  
  <p>i want it to be restricted with dot's in between like:
  &lt;&lt; | &lt; | 1 | 2 | 3 | ... | 8 | 9 | >></p>
  
  <p>Currently its like:
  &lt;&lt; | &lt; | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | >></p>
  
  <p>How can i achieve this in easypagination.?This could be great help.</p>
  
  <p>Thank You,</p>
  
  <p>My code goes here:</p>
  
  <p><strong>.css</strong></p>
  
  <pre><code> #easyPaginate {width:300px;}
   #easyPaginate img {display:block;margin-bottom:10px;}
  .easyPaginateNav a {padding:5px;}
  .easyPaginateNav a.current {font-weight:bold;text-decoration:underline;}
  </code></pre>
  
  <p><strong>.html</strong></p>
  
  <pre><code>&lt;div id="easyPaginate"&gt;
      &lt;img src="img/demo/surf1.jpg" /&gt;
      &lt;img src="img/demo/surf2.jpg" /&gt;
      &lt;img src="img/demo/surf3.jpg" /&gt;
      &lt;img src="img/demo/surf4.jpg" /&gt;
      &lt;img src="img/demo/surf5.jpg" /&gt;
      &lt;img src="img/demo/surf6.jpg" /&gt;
      &lt;img src="img/demo/surf7.jpg" /&gt;
      &lt;img src="img/demo/surf8.jpg" /&gt;
      &lt;img src="img/demo/surf9.jpg" /&gt;
      &lt;img src="img/demo/surf10.jpg" /&gt;
      &lt;img src="img/demo/surf11.jpg" /&gt;
      &lt;img src="img/demo/surf12.jpg" /&gt;
      &lt;img src="img/demo/surf13.jpg" /&gt;
      &lt;img src="img/demo/surf14.jpg" /&gt;
      &lt;img src="img/demo/surf15.jpg" /&gt;
      &lt;img src="img/demo/surf16.jpg" /&gt;
      &lt;img src="img/demo/surf17.jpg" /&gt;
      &lt;img src="img/demo/surf18.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>.js</strong></p>
  
  <pre><code>$('#easyPaginate').easyPaginate({
      paginateElement: 'img',
      elementsPerPage: 3,
      effect: 'climb'
  });
  </code></pre>