JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cor.co.il/landing/click/js/jquery.cycle.all.min.js"></script>
<script src="http://cor.co.il/landing/click/js/jquery.easing.min.js"></script>
            <div class="half last">
                <div class="slider_wrap">
                    <ul id="slider">
                        <li><img src="http://cor.co.il/landing/click/images/slide1.png" alt="Product Slide"></li>
                        <li><img src="http://cor.co.il/landing/click/images/slide1.png" alt="Product Slide"></li>
                        <li><img src="http://cor.co.il/landing/click/images/slide1.png" alt="Product Slide"></li>
                        <li><img src="http://cor.co.il/landing/click/images/slide1.png" alt="Product Slide"></li>
                    </ul>
                </div>
                    <div class="caption"> Caption 1 </div>
    <div class="caption">iGenius</div>
    <div class="caption"> Caption 3 </div>
    <div class="caption"> Caption 4 </div>
    <div class="caption"> Caption 5 </div>
                <!-- .slider_wrap -->
                <ul id="pager"></ul>
            </div>

CSS

.slider_wrap { position:relative; overflow:hidden; margin:0px; padding:0px; width:392px; height:274px; background:#fbfdff; border:1px solid #e0e4ea; padding:7px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; -khtml-border-radius:6px }

#slider { position:relative; overflow:hidden; margin:0px; padding:0px; list-style:none }

#slider li { float:left; width:392px; height:274px; overflow:hidden }
#pager { position:relative; overflow:hidden; text-align:center; margin:0px; padding:12px 0px 0px; list-style:none; z-index:999; line-height:0px; background:url(images/slider_shadow.png) 50% 0px no-repeat }
#pager li { display:inline-block; width:10px; margin:0px 2px }
#pager li a { display:block; width:10px; height:11px; background:url(images/pager.png) -14px 0px no-repeat }
#pager li.activeSlide a { background-position:0px 0px }

.caption{ position:absolute; top:75%; background: #333; color:#FFF; font-size:14px; height:1em; padding:.5em 5px 10px 5px; right:-220px; z-index:20}

.caption one{ position:absolute; top:75%; background: #333; color:#FFF; font-size:14px; height:1em; padding:.5em 5px 10px 5px; right:-120px; z-index:20}
.half {
    float: right;
    width: 408px;
    position: relative;
    overflow: hidden;
}

JavaScript

// -- Cycle Slider Settings --
$(document).ready(function() {

    function onBeforeCallbackFunction(curr, next, opts) {
        //slide out the caption
        $('.caption').animate({
            right: -220
        }, 300);
        $('.caption one').animate({
            right: -120
        }, 200);
    }

    function onAfterCallbackFunction(curr, next, opts) {
        var index = opts.currSlide; //zero based index of slides
        // adjust prev/next visibility
        $('#prev')[index === 0 ? 'hide' : 'show']();
        $('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
        //  slide in the caption  
        $('.caption').eq(index).animate({
            right: 0
        }, 600);
        console.log(index);
    }
        
  $('#slider').cycle({
        fx: 'scrollHorz',
        before: onBeforeCallbackFunction,
        after: onAfterCallbackFunction,
        speed: 1300,
        timeout: 4000,
        easing: 'easeInOutBack',
        sync: 1,
        pause: 1,
        pager: '#pager',
        // callback fn that creates a thumbnail to use as pager anchor 
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"></a></li>';
        }
    });            
});