JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

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://placehold.it/720x500/000/fff.png&text=SLIDE+1" alt="" />
                    </li>
                    <li>
                        <img src="http://placehold.it/720x500/00e/fc0.png&text=SLIDE+2" alt="" />
                    </li>
                    <li>
                        <img src="http://placehold.it/720x500/fff/000.png&text=SLIDE+3" 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;
    });

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

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

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

});