Анимированный слайдер с BxSlider, Блекджеком и Шлюпками

Если вас достали унылые карусельки,  с простой картинкой и статичными текстами, и в душе вы желаете оживить все это дело тогда вы попали по адресу.
  Не спорю, есть много библиотек для создания анимаций , но зачем подключать лишнее когда можно обойтись тем что под рукой? А под рукой у нас Bxslider (все его знаю. Ты нет? Ты из какой планеты?)

Вот что должно получится.

Полный JS код

$(document).ready(function(){
  $('.main-slider').bxSlider({controls:true,
      onSliderLoad:function(){
           Animate();
      },
      onSlideAfter  :function($slideElement, oldIndex, newIndex){
          console.log($slideElement.attr('class'));
          if($slideElement.hasClass('mega')){
             
              Animate();
          }else {
               $('.mega-slider-bg div').each(function(){
        $(this).css({opacity:0});});
          }
          
      }
  });
  
});
function Animate(){   
    //console.log('anim'); 
    var widthScreen = $(window).width();
    $('.mega-slider-bg div').each(function(){
        $(this).css({ opacity:0});
        var mode = $(this).data('mode');
        var xfromcenter = $(this).data('xfromcenter');
        var speed = $(this).data('speed');
        var eleWidth = $(this).width();
        var eleHeight = $(this).height();
        var delay = $(this).data('delay');
   
        
        if(mode=='right'){
            $(this).css({opacity:1,right:"-"+eleWidth+'px'});
            var toX = widthScreen/2 - xfromcenter;
            $(this).delay(delay).animate({right:toX},speed)
        }
        if(mode=='left'){
            $(this).css({opacity:1,left:"-"+eleWidth+'px'});
            var toX = widthScreen/2 - xfromcenter;
            $(this).delay(delay).animate({left:toX},speed)
        }
        if(mode==='topfadein'){
            var margintop = parseInt(jQuery(this).css("margin-top"));
            $(this).css( {opacity:0, marginTop : margintop-50});            
            $(this).delay(delay).animate({marginTop : margintop,opacity:1},speed);
        }
        
    });
}

HTML разметка

CSS

.mega-slider-bg {    background-position: center; background-image: url(../images/sliderimg/mega-s-bg.png);background-repeat:  no-repeat;width: 100%; height: 500px;}
.ms-1 {background-image: url(../images/sliderimg/mega-s1.png);background-repeat:  no-repeat;width: 66px; height: 90px; position: absolute;    
      margin-top: 193px;right: 579}
.ms-2 {background-image: url(../images/sliderimg/mega-s2.png);background-repeat:  no-repeat;width: 76px; height: 50px; position: absolute;    
      margin-top: 379px;right: 579}
.ms-3 {background-image: url(../images/sliderimg/mega-s3.png);background-repeat:  no-repeat;width: 47px; height: 65px; position: absolute;    
      margin-top: 379px;right: 579}

.ms-4 {background-image: url(../images/sliderimg/mega-s4.png);background-repeat:  no-repeat;width: 96px; height: 141px; position: absolute;    
      margin-top: 191px;}
.ms-5 {background-image: url(../images/sliderimg/mega-s5.png);background-repeat:  no-repeat;width: 143px; height: 100px; position: absolute;    
      margin-top: 192px;}

.ms-t1 {
    background-image: url(../images/sliderimg/text1.png);
     background-position: center;
     background-repeat:  no-repeat;
    width: 100%; 
    height: 75px; 
    position: absolute;    
    margin-top: 0px;
}
.ms-t2 {
    background-image: url(../images/sliderimg/text2.png);
    background-repeat:  no-repeat;
     background-position: center;
   width: 100%; 
    height: 100px; 
    position: absolute;    
    margin-top: 54px;
}
.ms-t3 {
    background-image: url(../images/sliderimg/text3.png);
    background-repeat:  no-repeat;
     background-position: center;
    width: 100%; 
    height: 100px; 
    position: absolute;    
    margin-top: 106px;
}

Без пены, поясню что и как!

Разумеется, одним копированием не обойдется. Придется пошевелить серое вещество.  JS код ну предельно прост.  Берет данные у div , и исходя из этого применяет анимацию. Стили тоже простые,Обьяснять смысла нет.