JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="wrapper">

    <ul id="slider">
         
        <li class="slide" style="background:black"></li>
        
        <li id="gallery3" class="slide" style="background:blue">
            
            <div class="gallery-wrapper">
            
                <ul class="gallery">
                    
                    <li>
                        
                        <img src="http://www.columbus-international.com/images/heroes/tour_trackday_tuscany.jpg" alt=""/>
                        <img src="http://www.wikipedy.com/images_m/motorbike_kids_s.jpg" alt=""/>
                        
                        <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt=""/>
                        
                        
                    </li> 
                    
                </ul>
                
            </div>
            
            <a class="gallery-next" href="#">Gallery Next</a>
            <a class="gallery-prev" href="#">Gallery Prev</a>
            
        </li>
        
        <li class="slide" style="background:cyan"></li>
        <li class="slide" style="background:magenta"></li>
        
    </ul>
    
</div>

<a class="slide-next" href="#">Next</a>
<a class="slide-prev" href="#">Prev</a>

CSS

div.wrapper {
    width: 300px;
    height: 300px;
    overflow: hidden;
    
}

div.gallery-wrapper {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}

ul#slider {
    width: 300px;
    height: 300px;
    overflow: hidden;
}
ul#slider li.slide {
    width: 300px !important;
    height: 300px !important;
    overflow: hidden;
    font-size: 100px;
    float: left;
    color: #ffffff;
    line-height: 300px;
    text-align: center;
}

ul#slider li.slide a {
    color: #ffffff !important;
    float: left;
    display: block;
    width: 100px;
    height: 30px;
    background: red;
    margin: 5px;
    line-height: 30px;
    font-size: 12px;
}

li#gallery3 ul.gallery {
    width: 200px !important;
    height: 200px !important;
}

li#gallery3 ul.gallery  li {
    width: 200px !important;
    height: 200px !important;
}

li#gallery3 ul.gallery li img {
    width: 200px !important;
    height: 200px !important;
}

JavaScript

$(function () {

    var slider = $('ul#slider').bxSlider({
        infiniteLoop: true,
        controls: false,
        mode: 'horizontal',
        touchEnabled: false,
        pager: false
    });

    $('a.slide-next').click(function () {
        slider.goToNextSlide();
        return false;
    });

    $('a.slide-prev').click(function () {
        slider.goToPrevSlide();
        return false;
    });

});

$(function () {

    var gallery3 = $('#gallery3 ul.gallery').bxSlider({
        infiniteLoop: true,
        controls: false,
        mode: 'fade',
        touchEnabled: false,
        pager: false
    });

    $('#gallery3 a.gallery-next').click(function () {
        gallery3.goToNextSlide();
        return false;
    });

    $('#gallery3 a.gallery-prev').click(function () {
        gallery3.goToPrevSlide();
        return false;
    });

});