JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/css/swiper.min.css">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide-1"></div>
        <div class="swiper-slide slide-2"></div>
        <div class="swiper-slide slide-3"></div>
        <div class="swiper-slide slide-4"></div>
        <div class="swiper-slide slide-5"></div>
        <div class="swiper-slide slide-6"></div>
        <div class="swiper-slide slide-7"></div>
        <div class="swiper-slide slide-8"></div>
        <div class="swiper-slide slide-9"></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="caption"> <span>Lorem ipsum:&nbsp;<span class="counter"></span>
</div>

CSS

.swiper-container {
    width: 600px;
    height: 300px;
}

.swiper-slide:nth-Child(even){
    background: #cccccc;
}

.swiper-slide:nth-Child(odd){
    background: #666666;
}

.caption {
    text-align: center;
    padding-top: 20px;
}
.counter, .counter span {
    position:relative;
}
.counter .next, .counter .count {
    position:absolute;
}
.counter .next {
    transform:translateY(-12px);
    left:0;
}
.counter .next, .counter .count {
    position:absolute;
}
.counter .next {
    transform:translateY(-12px);
    left:0;
}

JavaScript

var mySwiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    onSlideChangeStart: photos_change
});

var counter = $('.counter');
var currentCount = $('<span class="count">1<span/>');
counter.append(currentCount);

function photos_change(swiper) {
    var index = swiper.activeIndex + 1,
        $current = $(".photo-slide").eq(index),
        $c_cur = $("#count_cur"),
        $c_next = $("#count_next"),
        dur = 0.8;

    var prevCount = $('.count');
    currentCount = $('<span class="count next">' + index + '<span/>');
    counter.append(currentCount);
    TweenMax.to(prevCount, dur, {
        y: -12,
        opacity: 0,
        onCompleteParams: [prevCount],
        onComplete: function (prevCount) {
            prevCount.remove();
        },
        ease: Power2.easeOut
    });
    TweenMax.fromTo(currentCount, dur, {
        y: 12,
        opacity: 0
    }, {
        y: 0,
        opacity: 1,
        ease: Power2.easeOut
    });
}
//added before your [photos_change] method
var counter = $('.counter');
var currentCount = $('<span class="count">1<span/>');
counter.append(currentCount);
//

//and then inside your [photos_change] event handler
var prevCount = $('.count');
currentCount = $('<span class="count next">' + index + '<span/>');
counter.append(currentCount);
TweenMax.to(prevCount, dur, {
    y: -12,
    opacity: 0,
    onCompleteParams: [prevCount],
    onComplete: function (prevCount) {
        prevCount.remove();
    },
    ease: Power2.easeOut
});
TweenMax.fromTo(currentCount, dur, {
    y: 12,
    opacity: 0
}, {
    y: 0,
    opacity: 1,
    ease: Power2.easeOut
});
//