이미지 슬라이더 부동 수정

Question

이것은 내 웹 사이트 : link입니다. 이미지 슬라이더를 변경하고 싶습니다. 이제 가장 짧은 요소가 잘못된 위치에 있습니다. 나는이 같은 결과를 원하는 : link

이 내 코드입니다 : 내가 왼쪽 떠내려 이미지를 만들기 위해 변경해야 할 무엇

$.fn.imagesLoaded = function(callback){ 
    var elems = this.filter('img'), 
    len = elems.length, 
    blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 

    elems.bind('load.imgloaded',function(){ 
     if (--len <= 0 && this.src !== blank){ 
      elems.unbind('load.imgloaded'); 
      callback.call(elems,this); 
     } 
    }).each(function(){ 
     if (this.complete || this.complete === undefined){ 
      var src = this.src; 
      this.src = blank; 
      this.src = src; 
     } 
    }); 

    return this; 
}; 

var rotImages = []; 
var rotPointers = []; 
var actual = 0; 
var interv = null; 

$(document).ready(function() { 
    var checkInterv = window.setInterval(function() { 

     var i = 0; 
     var r = 0; 

     $("#rotator_items").children("img").each(function() { 

      if($(this).imagesLoaded() && $(this).width()>0) 
       r++; 

      i++; 
     }); 

     if(i == r) { 
      window.clearInterval(checkInterv); 
      init(); 
     } 

    },20) 

}); 

function init() { 
    var tmpPos = 0; 
    var first = true; 

    var i = 0; 

    interv = window.setInterval(nextRotator,5000); 

    $("#rotator_items > img").css({"position":"absolute","float":"none"}); 

    $("#rotator_items").children("img").each(function() { 
     rotImages.push(this); 

     var tmpWidth = $(this).width() * 300/$(this).height(); 

     $(this).css({"width": tmpWidth + "px", "height":"443px"}); 

     if(first) { 

      tmpPos = ($(window).width() - tmpWidth)/2; 

      $(this).css({"top":"0","left": tmpPos + "px"}); 

      tmpPos += tmpWidth; 

      rotPointers.push($('<div class="pointer actual" n="'+i+'"><div></div></div>')); 

      $("#pointer_wrap").prepend(rotPointers); 

      first = false; 

     } else { 

      $(this).css({"top":"0","left": tmpPos + "px", "opacity":"0.2"}); 

      tmpPos += tmpWidth; 

      rotPointers.push($('<div class="pointer" n="'+i+'"><div></div></div>')); 

      $("#pointer_wrap").prepend(rotPointers); 

     } 

     i++; 
    }); 


    for(i=0;i<rotImages.length;i++) { 

     $("#rotator_items").append($(rotImages[i]).clone().css({"top":"0","left": tmpPos + "px", "opacity":"0.2"})); 

     tmpPos += $(rotImages[i]).width(); 

    } 


    first = true; 

    for(i=rotImages.length;i>=0;i--) { 

     if(first) { 

      tmpPos = parseInt($(rotImages[0]).css("left")) - $(rotImages[i]).width(); 

      first = false; 

     } else { 

      tmpPos -= $(rotImages[i]).width(); 

     } 

     $("#rotator_items").prepend($(rotImages[i]).clone().css({"top":"0","left": tmpPos + "px", "opacity":"0.2"})); 

    } 


    $(".pointer").click(function() { 

     var clicked = parseInt($(this).attr("n")); 

     moveRotator(clicked); 

     window.clearInterval(interv); 
     interv = window.setInterval(nextRotator,5000); 

    }); 

} 

$(window).resize(function() { 
    var tmpPos = parseInt($(rotImages[actual]).css("left")) - (($(window).width() - $(rotImages[actual]).width())/2); 

    $("#rotator_items").stop().css({"left": (-tmpPos) + "px"}); 

}); 

function moveRotator(target) { 
    if(actual != target) { 

     var tmpPos = parseInt($(rotImages[target]).css("left")) - (($(window).width() - $(rotImages[target]).width())/2); 

     $("#rotator_items").stop().animate({"left": (-tmpPos) + "px"}, 1000); 

     $(rotImages[target]).animate({"opacity":"1"},800); 
     $(rotImages[actual]).animate({"opacity":"0.2"},500); 

     $(rotPointers[target]).addClass("actual"); 
     $(rotPointers[actual]).removeClass("actual"); 

     actual = target; 
    } 
} 

function nextRotator() { 
    var next = actual+1; 

    if(next>=rotImages.length) { 
     next = 0; 
    } 

    moveRotator(next); 
} 

? 내 초안 이미지처럼.

Answer 1

는 부트 스트랩이 ..^_^

사용 bootrap 플러그인 JQuery와, 그것의 매끄러운에 웹 페이지 효과 !