How to place next and previous buttons on a slider?

Question

I have this slider simple, but I can’t put buttons Previous and Next. And I was wondering if it’s "viable".

HTML

<div class="fadein">
  <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
  <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
  <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

CSS

.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }

JS

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});

Answer 1

There is a demo provided by jQueryDemo site: Basic jQuery Image Slider about that.

I adapted your code to the example (after running, click on Janela Toda for better viewing):

(function($) {
   var primeiraImagem = $('#slider-content .slider-img:first').index();
   var ultimaImagem   = $('#slider-content .slider-img:last').index();

   var imagemAtual    = primeiraImagem
   var proximaImagem  = primeiraImagem + 1
   var imagemAnterior = ultimaImagem

   var sliderImages = $('.slider-img');
   var sliderContent = $('#slider-content');
 
   var larguraImagem = parseFloat(sliderImages.eq(0).css('width'));
 
    setInterval(function(){
        proximaImagem = imagemAtual == ultimaImagem ? primeiraImagem : imagemAtual + 1;
        sliderContent.animate({ "left": -proximaImagem * larguraImagem });
        imagemAtual = proximaImagem;
        e.preventDefault();  
    }, 3000);
    
   $('#button-next').click(function() {
       proximaImagem = imagemAtual == ultimaImagem ? primeiraImagem : imagemAtual + 1;
       sliderContent.animate({ "left": -proximaImagem * larguraImagem });
       imagemAtual = proximaImagem;
       e.preventDefault();  
   });
   $('#button-prev').click(function() {
       imagemAnterior = imagemAtual == primeiraImagem ? ultimaImagem : imagemAtual - 1;
       sliderContent.animate({ "left": -imagemAnterior * larguraImagem });
       imagemAtual = imagemAnterior;
       e.preventDefault();  
   });
    
})(jQuery);

#slider {
    width: 600px;
    margin: 0 auto;
    position: relative;	
}

.slider-mask {
    overflow:hidden;
    position: relative;
}

.slider-img {
    margin:0; 
    float: left;
    position: relative;
}

.caption  {
    color:#DC6804; 
    padding:5px 10px 10px 10px; 
    margin:0; 
    font-family:Verdana; 
    text-transform:uppercase; 
    font-size:12px;
}  
   
#button-prev {
    position: absolute;
    top: 180px;
    cursor: pointer;
    left: -45px;
}

#button-next {
    position: absolute;
    top: 180px;
    cursor: pointer;
    right: -45px;
}

/* 
adjust #slider-content width as needed 
width = image width * image count
width = 600px * 3 = 1800px 
*/
#slider-content {
    width: 1800px;
    position: relative;
}     
   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="slider">
  <img id="button-prev" src="http://jquerydemo.com/demo/images/left.jpg">
      
  <div class="slider-mask">
   <div id="slider-content">
     <div class="slider-img">
         <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" />
     </div>
       
     <div class="slider-img">
         <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" />
     </div>
       
     <div class="slider-img">
         <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" />
     </div>
       
   </div>
  </div>
  <img id="button-next" src="http://jquerydemo.com/demo/images/right.jpg">
   

Fiddle