[bxslider.js] 슬라이드 썸네일 thumbnail

<div class="visual">
      <div class="slider">                                
              <span class="wish"></span>
                     <span id="page-num">
                            <em class="current">1</em> / <em class="total"></em>
                      </span>
                      <ul>
                            <li class="slide1"><img src="images/common/view-img.jpg"></li>
                            <li class="slide2"><img src="images/common/view-img.jpg"></li>
                            <li class="slide3"><img src="images/common/view-img.jpg"></li>
                            <li class="slide4"><img src="images/common/view-img.jpg"></li>
                            <li class="slide5"><img src="images/common/view-img.jpg"></li>
                            <li class="slide6"><img src="images/common/view-img.jpg"></li>
                            <li class="slide7"><img src="images/common/view-img.jpg"></li>
                       </ul>
        </div>
                            
        <div class="pager">
               <div class="outside">
                      <span id="prev"></span><span id="next"></span>
                </div>
                <ul class="bxslider-pager">
                      <li data-slideIndex="0" class="active"><img src="images/common/view-img.jpg"></li>
                      <li data-slideIndex="1"><img src="images/common/view-img.jpg"></li>
                      <li data-slideIndex="2"><img src="images/common/view-img.jpg"></li>
                      <li data-slideIndex="3"><img src="images/common/view-img.jpg"></li>
                      <li data-slideIndex="4"><img src="images/common/view-img.jpg"></li>
                      <li data-slideIndex="5"><img src="images/common/view-img.jpg"></li>
                      <li data-slideIndex="6"><img src="images/common/view-img.jpg"></li>
                </ul>
       </div>
</div>

$(document).ready(function(){
    var realSlider = $('.visual .slider').bxSlider({
           auto: false,
           speed:1000,
           pager:false,
           control:false,
           infiniteLoop:true,
           hideControlOnEnd:true,
           nextSelector: '#slider-next3',
           prevSelector: '#slider-prev3',
           onSlideBefore:function($slideElement, oldIndex, newIndex){
              changeRealThumb(realThumbSlider,newIndex);
              console.log($slideElement);
           },
           onSlideAfter:function($slideElement, oldIndex, newIndex){
              changeRealThumb(realThumbSlider,newIndex);
              console.log($slideElement);
           }
       });

       var realThumbSlider=$(".visual .pager .bxslider-pager").bxSlider({
           auto: false,
           slideWidth: 100,
           slideMargin: 5,
           pager:false,
           controls: false,
           speed:1000,
           infiniteLoop:false,
           hideControlOnEnd:true
       });

       linkRealSliders(realSlider,realThumbSlider);

       if($(".bxslider-pager li").length<7){
          $(".bxslider-pager .bx-next").hide();
       }

        function linkRealSliders(bigS,thumbS){

          $(".bxslider-pager").on("click","a",function(event){
             event.preventDefault();
             var newIndex=$(this).parent().attr("data-slideIndex");
             bigS.goToSlide(newIndex);
          });
       }

        function changeRealThumb(slider,newIndex){

          var $thumbS=$(".bxslider-pager");
          $thumbS.find('.active').removeClass("active");
          $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");

          if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
          else slider.goToSlide(slider.getSlideCount()-3);

          var current = parseInt(newIndex)+1; 
          $("#page-num").find(".current").text(current);
       }
    
});


.visual .bx-wrapper {max-width: 100%!important;}