1

Tenho este slider simples, mas não consigo por botões Anterior e Próximo. E queria saber se é "viável".

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);
});

1 Resposta 1

1

Existe uma demonstração disponibilizada pelo site jQueryDemo: Basic jQuery Image Slider sobre isso.

Adaptei o seu código ao exemplo (depois de executar, clique sobre Janela Toda para melhor visualização):

(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

3
  • E teria como colocar a função autoplay nesse basic Jquery Image slider?
    – Anderson
    17/03/2015 às 1:14
  • @Anderson Editei a resposta, veja se é isto.
    – stderr
    17/03/2015 às 14:00
  • 1
    Sim @Qmechanic73 isso que tava tentando. Obrigado!
    – Anderson
    17/03/2015 às 23:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .