JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kuralmedia.com/_outside/test-Slider/jquery.carouFredSel-6.0.4-packed.js"></script>
<div id="wrapper">
            <div id="btn_info"></div>
            <div id="slideshow-wrapper responsive">
                
                <div id="pager_slideshow"></div>
                 

                <div id="slideshow">
                    <div class="slide">
                      <img src="http://cs14101.vk.me/c607118/v607118554/4d49/X5mdIiIC9Wo.jpg" /> 
                    <div class="text_info">
                                    <h3>Infinity</h3>
                                    <p>A concept that in many fields refers to a quantity without bound or end.</p>
                    </div>
                      
                    </div>
                    
                    <div class="slide">
                    <img src="http://cs14101.vk.me/c607118/v607118554/4d40/oKagzUwJDw4.jpg" />
                    <div class="text_info">
                                    <h3>chiso</h3>
                                    <p>A concept tdzdzdzdzdzdzdzd bound or end.</p>
                    </div>
                    
                    </div>
                    <div class="slide"><img src="http://cs617724.vk.me/v617724582/5582/pZILArIFSqc.jpg" />
                    <div class="text_info">
                                    <h3>pepito</h3>
                                    <p>A concept thdzdzzdzdzdzd to a quantity without bound or end.</p>
                    </div>    
                    </div>
                    
                </div>

                
                
            </div>

            
        </div>

CSS

/* solution */
.slide { float:left }
/**/
.slideshow-wrapper { padding-bottom: 10px; position: relative; }
#slideshow { overflow: hidden; }
#slideshow .slide { position: relative; }
#slideshow img { border: none; width: 100%; height: 100%; z-index:0; }
.text_info { background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.6); position: absolute; bottom: 20px; width: 70%; margin-left: 15%; margin-right: 15%; }
.text_info h3 { text-align: center; color: white; font-size: 20px; margin: 0; text-shadow: none; }
.text_info p { color: white; font-size: 12px; text-align: center; margin: 0; }
#pager_slideshow { z-index:2; position: absolute; top: 1%; left:2%; padding: 2px 5px 0 0; }
#pager_slideshow a { background-color: #356; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 10px;/*box-shadow: 0 1px 1px #cef;*/            }
#pager_slideshow a:hover { ackground-color: #134; }
#pager_slideshow a.selected { background-color: #134; }
#pager_slideshow a span { display: none; }
#wrapper img#shadow { width: 100%; position: absolute; bottom: 0; }
#btn_info { position: absolute; z-index: 10; right:20px; bottom:20px; z-index: 1; width: 15px; height: 15px; background-color: red; cursor: pointer; }

JavaScript

$(function() {
                
                

                $('#slideshow').carouFredSel({
                    direction: 'left',
                    responsive: true,
                    circular: true,
                    infinite : false,
                    auto: {
                        pauseOnHover  : true,      
                    },                
                    items: {
                        visible: 1,
                        width        : 870,
                        height        : "46%"
                        
                    },
                    scroll: {
                        fx: 'scroll'
                    },
                    pagination: {
                        container: '#pager_slideshow',
                        duration: 300,
                        deviation : 0
                    }
                });
    
    

$("#btn_info").hover(function(){
    $('#text_info').stop(true, false).animate({opacity : 1}, 500, 'linear');
}, function() {
    $('#text_info').stop(true, false).animate({opacity : 0},200);
});





            });