jquery - スライダーにボタンを追加するにはどうすればよいですか?

Question

だから私はこのHTMLを持っています:

<div id="itemlist">  
    <img src="images/img1.jpg" id="image1">  
    <img src="images/img2.jpg" id="image2">
    <img src="images/img3.jpg" id="image3">
</div>

<div id="itemdescription">  
    <span data-for="image1">A</span>  
    <span data-for="image2">B</span>
    <span data-for="image2">C</span> 
</div>

次の JS ファイルを使用します。

$(document).ready(function() {
  //Initiliaze
  var itemList, item, className, thisItem, newOrder, itemDesc, desc;

  itemList  = $('#itemlist');
  item      = itemList.children('img');

  itemDesc  = $('#itemdescription');
  desc      = itemDesc.children('span');

  //Add class name for each item
  item.each(function(index) {

    className  = 'item-' + index;

    $(this).addClass(className).attr('data-order', index);

});

  //Show first item description
  desc.filter(':first-child').fadeIn();

  //On clicked fire animation
  item.on('click', function() {

    thisItem  = $(this);
    thisOrder = parseInt(thisItem.attr('data-order')) - 1;

    thisItem.addClass('show');

    //Reorder item position
    item.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() { 

      thisItem.removeClass().addClass('item-0').attr('data-order', '0');

      //Show selected item description
      desc.hide();
      desc.filter('[data-for=' + thisItem.attr('id') + ']' ).fadeIn('fast');
    });

    //Move siblings items backward
    window.setTimeout(function () {    

      for(var i = thisOrder; i >= 0; i--) {

        //Reorder item position
        movedItem = item.filter('[data-order=' + i + ']');
        newOrder  = parseInt(movedItem.attr('data-order')) + 1;
        className = 'item-' + newOrder;

        //Move them with transition
        movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder);

        //Remove their transition
        item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { 
          item.removeClass('transition');
        });
      }  
    }, 500);
  });
});

ここにもCSSがあります：

#itemdescription {  
    position: relative;  
    width: 415px;  
    margin: 0; 
    padding: 0 20px; 
}  

#itemdescription span {  
    display: none;
    line-height: 1.7em;  
}  

#itemdescription h2 {  
    font-size: 270%;
    line-height: 1.3em;  
    margin: 0;
} 

#itemlist {  
    display: block;  
    width: 450px; 
    top: -105px;
    right: -30px;
    position: relative;  
    transform-style: preserve-3d;
}  

#itemlist img {  
    position: absolute;  
    cursor: pointer;  
    left: 0;
    box-shadow: 0px 15px 50px rgba(0,0,0,0.4);  
}  

#itemlist img:hover {  
    top: -5px;  
}  

#itemlist img.item-0 {  
    z-index: 4;
    border: 5px solid #000;   
}  

#itemlist img.item-1 {  
    z-index: 3;  
    left: +20px;
    top: -20px; 
    border: 5px solid #fff;

}  

#itemlist img.item-2 {  
    z-index: 2;  
    left: +40px;
    top: -40px;  
}

.transition {  
    transition: 0.5s ease-out;  
}  

.show {  
    animation: show 1s linear;  
}  

@keyframes show{  
25% {  
    left: -50px;
    top: +10px;
}  

50% {  
    z-index: 5;  
    left: -75px;
    top: +20px;
}

75% {  
    z-index: 5;  
    left: -20px;
    top: +30px;
} 

100% {  
    z-index: 5;  
    left: 0px;
    top: +3px;
}  
}

ここで、スライダーの下に 3 つの画像に対応する 3 つのラジオ ボタンを追加して、ボタンをクリックすると画像とデータの間のスライドが発生するようにします。画像をクリックするとスライドする瞬間に、ボタンをクリックして画像をスライドできるようにしたいです。

私も急いでいるので、どなたか早急に解決策を教えていただけると助かります。

よろしくお願いします！