jQuery incrementing classname and function

For such situations I use data attributes to refer corresponding elements:

$('.linkSlide').click(function() {
    $('.slider').mySuperSlider('goTo', $(this).data('slide'));
    return false;
});

And in HTML you add data-slide attribute to each repeating element:

<a class="linkSlide" data-slide="3">...</a>

Here is abstract example of how such a binding can work: http://jsfiddle.net/rNvKe/

Instead of naming your action buttons

.linkSlide1
.linkSlide2
.linkSlide3
.etc...

you can just do

.linkslide

and make sure that there's no other element inside the parent of your buttons, that way your .linkslide elements will be organized by index from 0 to 19 (for 20 buttons).
Than go grab the .index() of the clicked button and send it to .superSlider( THAT INDEX!! ).
To animate your slider than you can just multiply that retrieved index by one-slide-width:

LIVE DEMO

jQuery:

$('.linkSlide, .back').click(function() {
    var ind = $(this).index()+1; // +1 cause we are already at 0
    if($(this).hasClass('back')) ind = 0; // go to slide index 0
    superSlider( ind ); 
});

function superSlider( ind ){
  var oneSlideWidth = $('.slide').width();
  $('#allSlides').stop().animate({left: -(ind*oneSlideWidth) },700);  
}

HTML:

<div id="slider">  
  <div id="allSlides">

    <div class="slide"> <!-- index = 0 -->
        Slide 0
       <button class="linkSlide">Tile index 1</button> <!-- index = 0, add 1-->
       <button class="linkSlide">Tile index 2</button> <!-- index = 1, add 1 -->
       <button class="linkSlide">Tile index 3</button> <!-- index = 2, add 1 -->
    </div>

    <div class="slide"> <!-- index = 1 -->
      Slide 1
      <button class="back">Back to 0</button>      
    </div>

    <div class="slide"> <!-- index = 2 -->
      Slide 2
      <button class="back">Back to 0</button>      
    </div>


    <div class="slide"> <!-- index = 3 -->
      Slide 3
      <button class="back">Back to 0</button>      
    </div>

  </div>
</div>

CSS:

#slider{
  position:relative;
  width:100px;
  height:95px;
  background:#eee;
  text-align:center;
  overflow:hidden;  
}
#allSlides{
  position:absolute;
  left:0;
  width:9999px;
  height:95px;
}

.slide{
  position:relative;
  width:100px;
  height:95px;
  float:left;
}

Explore the jQuery methods I used:

http://api.jquery.com/click/
http://api.jquery.com/index/
http://api.jquery.com/hasclass/
http://api.jquery.com/width/
http://api.jquery.com/stop/
http://api.jquery.com/animate/

This was my first question on this website, and I didn't expect so many detailed answers… so quickly! So thanks to all of you, for your time, skills and kindness!

I followed dfsq answer and it worked fine :-)

HTML:

    <div class="linkSlide" data-slide="1"></div>
    <div class="linkSlide" data-slide="2"></div>
    <div class="linkSlide" data-slide="3"></div>
    etc… until 20

JS:

$('.linkSlide').click(function() {
    $('.slider').mySuperSlide('goTo', $(this).data('slide'));
    return false;
});