JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<script type="text/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} );
    });
</script>
<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">
     ...

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;
	float:left;
	position:relative;

}
.lof-opacity  li{
	position:absolute;
	top:0;
	left:0;
	float:inherit;
}
ul.lof-main-wapper li img{
	padding:0px;	
}

/* item navigator */
.lof-navigator-wapper...

JavaScript

// 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");
    },
    
    unmousewheel: function(fn) {
        return this.unbind("mousewheel", fn);
    }
});
 
 
function handler(event) {
    var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
    
    event = $.event.fix(event || window.event);
    event.type = "mousewheel";
    
    if ( event.wheelDelta ) delta = event.wheelDelta/120;
    if ( event.detail     ) delta = -event.detail/3;
    
    // Add events and delta to the front of the arguments
    args.unshift(event, delta);
 
    return $.event.handle.apply(this, args);
}
 
})(jQuery);
 
/**
 * @version     $Id:  $Revision
 * @package     jquery
 * @subpackage  lofslidernews
 * @copyright   Copyright (C) JAN 2010 LandOfCoder.com <@emai:[email protected]>. All rights reserved.
 * @website     http://landofcoder.com
 * @license     This plugin is dual-licensed...