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>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="caption">
    <span>Lorem ipsum,
        <span class="counter">
            <span class="count" id="count_cur">1</span><span class="count next" id="count_next">2</span>/3
        </span>
    </span>
</div>

CSS

.swiper-container {
    width: 600px;
    height: 300px;
}
.slide-1 {
    background: #FFEBEE;
}
.slide-2 {
    background: #FFCDD2;
}
.slide-3 {
    background: #EF9A9A;
}
.caption {
    text-align: center;
    padding-top: 20px;
}
.counter, .counter span {
    position:relative;
}
.counter span {
    display: inline-block;
}
.counter .next {
    position:absolute;
    bottom:0;
    left:0;
}

JavaScript

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


// Init
var $c_cur = $("#count_cur"),
    $c_next = $("#count_next");

TweenLite.set($c_next, {y: 12, opacity: 0}, "count");


// Change counter function
function photos_change(swiper) {
    var index = swiper.activeIndex +1,
        $current = $(".photo-slide").eq(index),
        dur = 0.8,
        tl = new TimelineLite();
    
    // Just a test
    tl.to($c_cur, dur, {y: -12, opacity: 0}, "count")
      .to($c_next, dur, {y: 0, opacity: 1}, "count")
    
    //$c_cur.text(index);
    //$c_next.text(index + 1);
}