JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="https://www.jssor.com/Content/css/site-style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jssor-slider/20.0.0/jssor.slider.debug.js"></script>
<!--jssor full width slider-->
    <div class="slider_1_wrapper prop_item">
    <div id="left_num">
    1
    </div>
    <div id="right_num">
    1
    </div>
        <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 880px; height: 500px; overflow: hidden; visibility: hidden;">
            <!-- Loading Screen -->
            <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
                <div style="position:absolute;display:block;background:url('http://ericeira.net/assets/_img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
            </div>
            <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 880px; height: 500px; overflow: hidden;">
				                    <div style="display: none;">
                        <img data-u="image" src="http://www.booking-tools.com/img/objects/113/img_9685.jpg" alt="Ericeira - unique in Portugal" />
                        <!--CAPTION-->
                        <div data-u="caption" class="container img_caption_container">
                            <div class="img_caption">patio and neighbourhood</div>
                        </div>                    
                    </div>
                                    <div style="display: none;">
                        <img data-u="image" src="http://www.booking-tools.com/img/objects/113/img_9641.jpg" alt="Ericeira - unique in Portugal" />
                        <!--CAPTION-->
                        <div data-u="caption"...

CSS

#left_num{ float:left; padding:10px 15px; border: 1px solid navy; border-radius:30px;}
#right_num{ float:right; padding:10px 15px; border: 1px solid navy;border-radius:30px;}

JavaScript

var jssor_1_SlideshowTransitions = [
		  	{$Duration:3000,$Opacity:2}
		];
		
		var jssor_1_options = {
			$AutoPlay: true,
			$SlideshowOptions: {
				$Class: $JssorSlideshowRunner$,
				$Transitions: jssor_1_SlideshowTransitions,
				$TransitionsOrder: 1
			},
			$ArrowNavigatorOptions: {
				$Class: $JssorArrowNavigator$
			},
			$BulletNavigatorOptions: {
				$Class: $JssorBulletNavigator$,
				$Scale:false
			}			
		};
		
		var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

tot_img=$('img[data-u="image"]').length;
jssor_1_slider.$On($JssorSlider$.$EVT_PARK,function(slideIndex, fromIndex){
    console.log('remaining:'+ parseInt(tot_img-slideIndex-1))
    $('#left_num').text(slideIndex+1)
    $('#right_num').text('+'+parseInt(tot_img-slideIndex-1))
});
		
		//responsive code begin
		//you can remove responsive code if you don't want the slider scales while window resizing
		function ScaleSlider() {			
			var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
			$prop_name_width = $('.prop_header').innerWidth();
			$('#prop_name').css({'width':$prop_name_width});
			//$('.flex_bgrd_receiver').addClass('flex_bgrd');
			if (refSize) {
				// scale to the width of property name box
				w=$('.prop_name').innerWidth() ;
				refSize = Math.min(refSize, w);				
				jssor_1_slider.$ScaleWidth(w);	

				// scale caption & font-size to have allways same pixel height				
				originalWidth= jssor_1_slider.$GetOriginalWidth();
				ratio=Math.ceil(originalWidth/w*15);
				$('.img_caption_container').css({'height':ratio*2+'px','font-size':ratio+'px'});	
				// scale bullets
				$('.bullets').css({'height':ratio*2+'px','width':ratio*2+'px'});	
						
			}
			else {
				window.setTimeout(ScaleSlider, 30);
			}
		}
	
		ScaleSlider();
		$(window).bind("load", ScaleSlider);
		$(window).bind("resize", ScaleSlider);
		$(window).bind("orientationchange", ScaleSlider);
		//responsive code end