JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<script src="http://html5beta.com/demo/zxdslider/js/zxdslider.js"></script>
<link rel="stylesheet" href="http://html5beta.com/wp-content/themes/Paper3/style.css">
<div id="zxdslider"> <!--/you can change the id name, -->  
    <span class="slidernav leftnav left">&lt;</span><!--/this is for click to see last slider -->  
    <ul id="zxdsliderContent"> 
        <li class="zxdsliderli"> <!--/li element must have a class name  "the id you set"+li -->  
            <img src="http://html5beta.com/demo/zxdslider/img/a1.jpg" alt="a1" /> 
            <!--/each li element must have a img and a span,you can put anything you want in the span -->  
            <span> 
                <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="jQuery is sweet!">jQuery is sweet!</a></h2> 
                <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p> 
            </span> 
        </li> 
        <li class="zxdsliderli"> 
            <img src="http://html5beta.com/demo/zxdslider/img/a2.jpg" alt="a2" /> 
            <span> 
                <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is small!">zxdSlider is small!</a></h2> 
                <p>zxdSlider is small!jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p> 
            </span> 
        </li> 
        <li class="zxdsliderli"> 
            <img src="http://html5beta.com/demo/zxdslider/img/a3.jpg" alt="a3" /> 
            <span> 
                <h2><a href="http://html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is easy to use!">zxdSlider is easy to use!</a></h2> 
               ...

CSS

#zxdslider {
        width: 960px;
        height: 262px;
        position: relative;
        overflow: hidden;
        background:#555;
        margin:10px 0px 25px 0px;
        padding:0;
}
#sliderContent {
        width: 880px;/*its width= #zxdslider's width - .slidernav's width*/
        padding:0;
        margin:0;
}
.zxdsliderli{
        float: left;//must have this
        position: relative;
        display: none;/*must have this*/
        width:880px;/*its width= #zxdslider's width - .slidernav's width*/
        height:262px;
}
.zxdsliderli span {
        position:absolute;/*must have this*/
        right:0;
        font: 13px Arial, Helvetica, sans-serif;
        width:370px;
        color: #ddd;
        display: none;/*must have this*/
        top: 0;
        padding: 10px 13px;
        margin:0 40px 0 0;
}
.zxdsliderli img{
        margin:6px;
}
.zxdsliderli a{
        color:#fff;
}
#zxdslider h2 {
        line-height: 40px;
}
#zxdslider h2 a {
        color: #ddd;
}
.slidernav{
        height:262px;
        width:40px;
        font-size:38px;
        color:transparent;
        line-height:250px;
}
.slidernav:hover{
        cursor:pointer;
}
.rightnav{
        text-align:right;
}
.left{float:left}/*must have this*/
.right{float:right}/*must have this*/

JavaScript

$(function($) {
        $("#zxdslider").zxdSlider();
})