JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js"></script>
<ul id="slider1">
    <li
        style="list-style: none outside none; position: absolute; top: 0px; left: 0px; z-index: 99;">
        <div class="lookbook">
            <div class="lookbook-top"></div>
            <div class="lookbook-mid">
                <img width="375" height="542" alt="man"
                    src="http://www.onassisdev.us/media//lookbook/test.jpg"
                    style="border: 1px solid #eaeadc;">
                    <div class="controls">
                        <ul>
                            <li><a href="#">&nbsp;</a></li>
                            <li><a href="#">&nbsp;</a></li>
                        </ul>
                    </div>
                    <div style="padding-top: 20px" class="lookbook-list">
                        <h2>Autumn/Winter 2012 - Look 1</h2>
                        <ul>
                            <li><a style="color: #000; float: left">a.&nbsp;</a><span><a
                                    style="color: #677B99"
                                    href="http://www.onassisdev.us/index.php/apparel/shirts/shirt-1.html">Authur</a>
                            </span> Description</li>
                            <li><a style="color: #000; float: left">b.&nbsp;</a><span><a
                                    style="color: #677B99"
                                    href="http://www.onassisdev.us/index.php/apparel/shirts/green-short.html">product
                                        2</a> </span> Description</li>
                            <li><a style="color: #000; float: left">c.&nbsp;</a><span><a
                                    style="color: #677B99"
                                    href="http://www.onassisdev.us/index.php/apparel/trousers/pant-2.html">product
                                        3</a> </span> Description</li>
                            <li><a style="color: #000; float:...

JavaScript

$(document).ready(function(){
    $('#slider1').bxSlider({
        mode:'fade',
      displaySlideQty:1,
        moveSlideQty:1,
        infiniteLoop:false,
        hideControlOnEnd:true,
        controls:true                    
      }); 
    //    ID has to be equal of list
      
  });