左右のボタンを押すと画像がフェードインで切り替わるjquery

非エンジニアのデザイナーが使うので、CSS側と絡んで調整できるように

HTML

<div class="charaContainer">
  <!-- 矢印 -->
  <div class="btnBox">
    <p class="_prev">ボタン左</p>
    <p class="_next">ボタン右</p>
  </div>
  <!-- 切り替える画像 -->
  <div class="charaBox">
    <ul>
      <li class="hoge on"><img src="" width="" height="" alt=""></li>
      <li class="hoge"><img src="" width="" height="" alt=""></li>
      <li class="hoge"><img src="" width="" height="" alt=""></li>
    </ul>
  </div>
</div><!-- /charaContainer -->

jquery

  jQuery(function($){
  });
  $(function(){
   $('.hoge').on('click', function(){
    if ($(this).hasClass('on')) return;
    var idx = $(this).index();
    $('.hoge').removeClass('on');
    $('.hoge').eq(idx).addClass('on');
  });

   $('._prev, ._next').on('click', function(){
    var curr  = $('.hoge').filter('.on').index();
    var to = $(this).hasClass('_prev') ? curr - 1 : curr + 1;
    var elem;
    if (to < 0) {
      elem = $('.hoge:last');
    } else if ($('.hoge').length <= to) {
      elem = $('.hoge:first');
    } else {
      elem = $('.hoge').eq(to);
    }
    elem.trigger('click')
  });
 });

css

.charaBox ul li{
  opacity: 0;
  duration: 1s;
}
.charaBox ul li.on{
  opacity: 1;
}

/* 画像とかボタンの見た目CSSはイイカンジに！ */

liにonが付くので、opacityなりで切り替わりエフェクトを使いましょう。
一列に並べてスライドさせるもよし、フェードインさせるもよし。
(ここではフェードイン。)