How to put the next and previous buttons on a Slider?

Question

How to put the next and previous buttons on a Slider?

Navigation

#1 by (1 votes)

1

I have this simple slider , but I can not get through Previous and Next buttons. And I wanted to know if it's "workable."

HTML

<div class="fadein">
  <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"><imgsrc="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);
});

javascript html css slider

asked by anonymous 16.03.2015 / 00:55

1 answer

Hierarchical Object Filter implementation tip

score 1 · Accepted Answer

There is a demonstration available on the jQueryDemo website: Basic jQuery Image Slider about it.

I have adapted your code to the example (after running, click on All window for better visualization):

(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><divid="slider">
  <img id="button-prev" src="http://jquerydemo.com/demo/images/left.jpg"><divclass="slider-mask">
   <div id="slider-content">
     <div class="slider-img">
         <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"/></div><divclass="slider-img">
         <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"/></div><divclass="slider-img">
         <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"/></div></div></div><imgid="button-next" src="http://jquerydemo.com/demo/images/right.jpg">

Fiddle