title: Image Slider Swiper function
body: <p>I am using swiper image slider and according to their API, i should be able to have a call back function but it is not working ..
  what i am trying to do is that i have a container with text over my images with opacity: 0 and I have a css animation class that I want to be added to my container, so as soon as the page is loaded, I want  the animation to kick in on the first slide, next slide same rule , starts without the css class , add the css class to it </p>
  
  <p>here is my javascript code </p>
  
  <pre><code>var mySwiper = new Swiper('.swiper-container', {
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          spaceBetween: 30,
          speed: 600,
          effect: 'fade',
          fade: {
               crossFade: true
          },
          onSlideChangeStart: function (Swiper){
              $('.slide-info').addClass('slider-text-animation ');
          },
          onSlideChangeEnd: function (Swiper){
              $('.slide-info').removeClass('slider-text-animation ');
          },
          loop: true,
          autoplay: 6500  
      });
  </code></pre>