var slider;

 $(document).ready(function(){
   slider = $('.bxslider').bxSlider({
   pagerCustom: '.banner_name_target',
   auto: true,
   autoControls: false,
   onSlideAfter : function(){
    var idx = slider.getCurrentSlide()
    $("#right_con").css({"background-color" : $(".banner_name_target li:eq("+idx+") a").attr("data-slide-background") });
   },
   mode: 'horizontal',
          infiniteLoop: true,
            hideControlOnEnd: true,
       controls: false
   });

  
        $('.banner_name_target li a').click(function(e){
            var i = $(this).attr("data-slide-index");
            slider.goToSlide(i);
            slider.stopAuto();
            restart=setTimeout(function(){
                slider.startAuto();
                },500);

            return false;
        });
 });



<div id="right_con">
 <!-- 메인 배너 -->
 <div id="main_contents1">
  <ul class='bxslider'>
   <li><a href="#"><img src="/data/file/main_visual1_1.jpg" alt="든든한 한끼!"></a></li>
   <li><a href="#"><img src="/data/file/main_visual1_1.jpg" alt="든든한 한끼!"></a></li>
   <li><a href="#"><img src="/data/file/main_visual1_1.jpg" alt="든든한 한끼!"></a></li>
   <li><a href="#"><img src="/data/file/main_visual1_1.jpg" alt="든든한 한끼!"></a></li>
   <li><a href="#"><img src="/data/file/main_visual1_1.jpg" alt="든든한 한끼!"></a></li>
   <li><a href="#"><img src="/data/file/main_visual1_1.jpg" alt="든든한 한끼!"></a></li>
  </ul>
  <div class="banner_name" >
   <ul class='banner_name_target'>
    <li><a data-slide-index="0" data-slide-background="#f8f0da" href="#" class="active">0</a></li>
    <li><a data-slide-index="1" data-slide-background="#ffffff" href="#">1</a></li>
    <li><a data-slide-index="2" data-slide-background="#f8f0da" href="#">2</a></li>
    <li><a data-slide-index="3" data-slide-background="#ffffff" href="#">3</a></li>
    <li><a data-slide-index="4" data-slide-background="#f8f0da" href="#">4</a></li>
    <li><a data-slide-index="5" data-slide-background="#ffffff" href="#">5</a></li>
   </ul>
  </div>
 </div>
</div>