Swiper with animation

by Alexey Zuev

HTML

<link rel="stylesheet" href="http://www.idangero.us/swiper/dist/css/swiper.css">
<script src="http://www.idangero.us/swiper/dist/js/swiper.min.js"></script>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
              <span class="roll-in">Как правильно написать условие?</span>
            <img src="http://lorempixel.com/400/200/sports" width="400" height="200" alt=""/>
        </div>
        <div class="swiper-slide">
            <span class="roll-in">С этим проблем нету, но что написать</span>
            <img src="http://lorempixel.com/400/200/animals" widht="400" height="200" alt=""/>
        </div>
         <div class="swiper-slide">
            <span class="roll-in">Не использую setInterval</span>
            <img src="http://lorempixel.com/400/200/nature" widht="400" height="200" alt=""/>
        </div>
        <div class="swiper-slide">
            <span class="roll-in">Слайд переключился - опять проверил и т.д. </span>
            <img src="http://lorempixel.com/400/200/food" widht="400" height="200" alt=""/>
        </div>
    </div>
</div>

CSS

.swiper-container {
    width: 400px;
    margin-top: 50px;
}

.roll-in {
    display: none;
}

.animated .roll-in { 
    position: absolute;
    display: block;
    padding: 10px;
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
     -webkit-animation-name: rollIn; 
    animation-name: rollIn;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    margin: auto;
    background: rgba(0,0,0,.6);
    color: #fff;
    text-align: center;
} 

@-webkit-keyframes rollIn { 
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 
    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 
} 
@keyframes rollIn { 
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); } 
}

JavaScript

var slides = $('.swiper-slide');
var mySwiper = new Swiper('.swiper-container', {
    autoplay: 3000,
    onSlideChangeStart : function(swiper) {
        slides.eq(swiper.previousIndex).removeClass('animated');
        slides.eq(swiper.activeIndex).addClass('animated')
    }
});