jQuery slider tutorial.

Tutoriale

• Html dla slider-a
• Style CSS dla slider-a
• Javascript slider-a
• Demo

Html dla slider-a

    <div style="display:none;">
      <img src="images/c30.jpg" class="volvo" id="v1" alt="Volvo C30"/>
      <img src="images/s40.jpg" class="volvo" id="v2" alt="Volvo S40"/>
      <img src="images/v50.jpg" class="volvo" id="v3" alt="Volvo V50"/>
      <img src="images/v70.jpg" class="volvo" id="v4" alt="Volvo V70"/>
      <img src="images/xc90.jpg" class="volvo" id="v5" alt="Volvo XC90"/>
    </div>

    <span id="prev">Prev</span>
      <div id="container"></div>
    <spa id="next">Next</span>
dsad
  

Style CSS dla slider-a

.volvo{width:200px;height:150px;}
#next{float:right;}
#prev{float:left;}
#container{border:1px solid red;float:left;margin-left:15px;}

Javascript

    var size = 5;
    var display = 3;
    var volvo = 1;
    
    function displayVolvo(volvoNumber){
      var volvoImage = jQuery('#v' + volvoNumber);
      var tmp =  volvoImage.clone();
      tmp.appendTo('#container');
      volvoImage.css('width', '200px');
      volvoImage.css('height', '150px');
      volvoImage.css('float', 'left');
      volvoImage.css('display', 'block');
    };

  function getVolvos(){
    jQuery('#container').empty();
    
    var modulo = volvo % size;
    
    var p = ((modulo + size) + 1) % size;
    var d = ((modulo + size) + 2) % size;
    var t = ((modulo + size) + 3) % size;

    if(p == 0 ){
       p = size;
    }

    if(d == 0){
       d = size;
    }

    if(t == 0){
       t = size;
    }

    displayVolvo(p); 
    displayVolvo(d);
    displayVolvo(t);  
  };

  function init(){
      getVolvos();
  }

  $(document).ready(function() {
    jQuery('#next').click(function(){
       volvo = volvo + 1;
       getVolvos();
    })

    jQuery('#prev').click(function(){
       volvo = volvo - 1;
       getVolvos();
    })

    init();
  });

Demo slider-a

Prev Next