jquery - UI-Slider サムネイルを組み合わせた Jquery Slider/Banner

Question

Jquery バナーと UI-Slider ウィジェットを組み合わせて、この Web サイトのバナーのようなものを作成できるかどうか、誰かに提案してもらえますか? - http://corporate.arcelormittal.com/

Answer 1

CSS3 を使用すると、より適切な方法で実行できます。UI-Sliderでもできます。答えは、リアルタイムで変化する値にあります。

jQueryサンプル

$(function(){
  var slider = $(".slider").slider();
  $(".event-listener1").click(function(){
    slider.slider("value", 0);
    /* Slide to first image */
  });
  $(".event-listener2").click(function(){
    slider.slider("value", 20);    
    /* Slide to second image */
  });
  $(".event-listener3").click(function(){
    slider.slider("value", 40);
    /* Slide to ... */
  });
  $(".event-listener4").click(function(){
    slider.slider("value", 60);    
  });
  $(".event-listener5").click(function(){
    slider.slider("value", 80);    
  });
  $(".event-listener6").click(function(){
    slider.slider("value", 100);    
  });
});

そしてHTMLプレビュー

<div>
  <div class="slider"></div>
  <a href="javascript:void(0);" class="event-listener1">
    Change value to 0
  </a><br />
  <a href="javascript:void(0);" class="event-listener2">
    Change value to 20
  </a><br />
  <a href="javascript:void(0);" class="event-listener3">
    Change value to 40
  </a><br />
  <a href="javascript:void(0);" class="event-listener4">
    Change value to 60
  </a><br />
  <a href="javascript:void(0);" class="event-listener5">
    Change value to 80
  </a><br />
  <a href="javascript:void(0);" class="event-listener6">
    Change value to 100
  </a>

</div>