JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="container-fluid p-0" >
<div id="lofslidecontent45" class="lof-slidecontent w-100" style="min-height:540px;">
    <div class="preload"><div></div></div>
    <!-- MAIN CONTENT -->
    <div class="lof-main-outer w-100" style="min-height:540px;">
        <ul class="lof-main-wapper">
            <?php foreach ($foto as $f):?>
            <li >
                <img src="<?= $this->url('application', ['action'=>'file'],
                    ['query'=>['name'=>$f['image']],  'thumbnail'=>true]) ?>" title="<?php echo $f['title'];?>"  class=" w-100">
                <div class="lof-main-item-desc">
                    <h3><a target="_parent" title="<?php echo $f['lable'];?>" href="/application/<?php echo $f['link'];?>/<?php echo $f['id'];?>">/ <?php echo $f['title'];?> /</a></h3>
 
                    <p><?php echo $f['description'];?>
                        <a class="readmore" href="/application/<?php echo $f['link'];?>/<?php echo $f['id'];?>">Читать далее... </a>
                    </p>
                </div>
            </li>
            <?php endforeach;?>
        </ul>
    </div>
    <!-- END MAIN CONTENT -->
    <!-- NAVIGATOR -->
  <div class="lof-navigator-wapper">
 
        <div onclick="return false" href="" class="lof-next">Next</div>
        <div class="lof-navigator-outer">
            <ul class="lof-navigator">
                <?php foreach ($foto as $f):?>
                    <li><img src="<?= $this->url('application', ['action'=>'file'],
                        ['query'=>['name'=>$f['image']],  'thumbnail'=>true]) ?>" class="d-block w-100"></li>
                <?php endforeach;?>
            </ul>
        </div>
        <div onclick="return false" href="" class="lof-previous">Previous</div>
    </div>
    <!----------------- --------------------->
</div>
</div>
<script type="text/javascript">
 
</script>

CSS

@charset "utf-8";
/* CSS Document */
body {
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#39414A;
}
 
a{
    text-transform:none;
    color:#333
}
 
.lof-slidecontent, .lof-slidecontent a {
    color:#FFF; 
}
.lof-slidecontent a.readmore{
    color:#58B1EA;
    font-size:95%;
    
}
.lof-slidecontent{
    position:relative;
    overflow:hidden;
    border:#F4F4F4 solid 1px;
}
.lof-slidecontent .preload{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:100000;
    text-align:center;
    background:#FFF
}
.lof-slidecontent .preload div{
    height:100%;
    width:100%;
    background:transparent url(../img/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
    position:relative;
    height:100%;
    width:100%;
    z-index:3px;
    overflow:hidden;
}
 
 
/*******************************************************/
.lof-main-item-desc{
    z-index:100px;
    position:absolute;
    bottom:50px;
    left:0px;
    width:350px;
    background:url(../img/bg_trans.png);
    height:100px;
    /* filter:0.7(opacity:60) */
    padding:10px;
}
.lof-main-item-desc p{
    margin:0 8px;
    padding:8px 0
}
.lof-main-item-desc h3{
    padding:0;
    margin:0
}
.lof-main-item-desc h2{
    padding:0;
    margin:15px 0 0 0px;
}
.lof-main-item-desc h3 a{   
    margin:0;
    background:#C01F25;
    font-size:75%;
    padding:2px 3px;
    font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
    text-transform:uppercase;
    text-decoration:none
}
.lof-main-item-desc h3 a:hover{
 
    text-decoration:underline;
}
.lof-main-item-desc h3 i {
    font-size:70%;
}
 
/* main flash */
ul.lof-main-wapper{
    /* margin-right:auto; */
    overflow:hidden;
    background:transparent url(../img/load-indicator.gif) no-repeat scroll 50% 50%;
    padding:0px;
    margin:0;
    position:absolute;
    overflow:hidden;
 
}
 
ul.lof-main-wapper li{
    overflow:hidden;
    padding:0px;
    margin:0px;
   ...

JavaScript

$(document).ready( function(){
        var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
            next:$('#lofslidecontent45 .lof-next') };
 
        $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
            direction       : 'opacitys',
            easing          : 'easeInOutExpo',
            duration        : 1200,
            auto            : false,
            maxItemDisplay  : 4,
            navPosition     : 'horizontal', // horizontal
            navigatorHeight : 32,
            navigatorWidth  : 80,
            mainWidth:980,
            buttons         : buttons} );
    });
// JavaScript Document
/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 *
 * Version: 3.0.2
 * 
 * Requires: 1.2.2+
 */
 
(function($) {
 
var types = ['DOMMouseScroll', 'mousewheel'];
 
$.event.special.mousewheel = {
    setup: function() {
        if ( this.addEventListener )
            for ( var i=types.length; i; )
                this.addEventListener( types[--i], handler, false );
        else
            this.onmousewheel = handler;
    },
    
    teardown: function() {
        if ( this.removeEventListener )
            for ( var i=types.length; i; )
                this.removeEventListener( types[--i], handler, false );
        else
            this.onmousewheel = null;
    }
};
 
$.fn.extend({
    mousewheel: function(fn) {
        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    },
    
    onmousewheel: function(fn) {
        return this.unbind("mousewheel", fn);
    }
});
 
 
function handler(event) {
    var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
    
   ...