JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://beta.byscripts.info/byslidemenu.js"></script>
<ul id="byslidemenu">
    <li class="skip"><img src="http://beta.byscripts.info/animals.jpg" alt="" /></li>
    <li>
        <span class="trigger">trigger</span>
        <img src="http://beta.byscripts.info/cat.jpg" alt="" />
    </li>
    <li class="default"><img src="http://beta.byscripts.info/dog.jpg" alt="" /></li>
    <li><img src="http://beta.byscripts.info/elephant.jpg" alt="" /></li>
    <li class="skip"><img src="http://beta.byscripts.info/technology.jpg" alt="" /></li>
    <li><img src="http://beta.byscripts.info/computer.jpg" alt="" /></li>
    <li>
        <span class="trigger">trigger</span>
        <img src="http://beta.byscripts.info/electronics.jpg" alt="" />
    </li>
    <li><img src="http://beta.byscripts.info/engine.jpg" alt="" /></li>
</ul>

CSS

#byslidemenu li{
    width: 300px;
    height: 225px;
}
.trigger{
    position: absolute;
    width: 50px;
    font-family: arial, sans-serif;
    text-align: center;
    background-color: black;
    color: white;
    font-size: 8pt;
    font-weight: bold;
    padding: 6px 0px; 
}

JavaScript

new BySlideMenu();