JSFiddle - React, Tailwind, and code Playground

by dweiliu

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<body>
  <section>
    <p>width: 175px</p>
    <div class="slider1 group menuSlider w175">
      <div class="previous group">Previous</div>
      <div class="previousButton group"></div>
      <ul class="bxslider">
        <li>
          <p>1 and attack the Romulans. </p>
        </li>
        <li>
          <p>2 I recommend you don't fire until you're within 40,000 kilometers. Did you come here for something in particular</p>
        </li>
        <li>
          <p>3 You bet I'm agitated! I may be surrounded by insanity, but I am not insane.</p>
        </li>
        <li>
          <p>4 Sure. You'd be surprised how far a hug goes with Geordi, or Worf.</p>
        </li>
        <li>
          <p>5 Some days you get the bear, and some days the bear gets you.</p>
        </li>
        <li>
          <p>6 Wouldn't that bring about chaos?</p>
        </li>
        <li>
          <p>7 A surprise party? Mr. Worf, I hate surprise parties. I would *never* do that to you.</p>
        </li>
        <li>
          <p>8 Your head is not an artifact!</p>
        </li>
        <li>
          <p>9 Could someone survive inside a transporter buffer for 75 years?</p>
        </li>
      </ul>
      <div class="next">Next</div>
      <div class="nextButton"></div>
    </div>
    <p>different width</p>
    <div class="slider2 group menuSlider w300 resources">
      <div class="previous">Previous</div>
      <div class="previousButton"></div>
      <ul class="bxslider">
        <li>
          <p>1 and attack the Romulans. </p><span>Read more >></span>
        </li>
        <li>
          <p>2 I recommend you don't fire until you're within 40,000 kilometers.</p><span>Read more >></span>
        </li>
        <li>
          <p>3 You bet I'm agitated! I may be surrounded by insanity, but I am not insane.</p><span>Read more >></span>
        </li>
...

CSS

/*Reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

ol, ul { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; }

body { font-size: 11px; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; }
body section { width: 300px; margin: 0 auto; }
body section p { margin: 20px 0; }
body .group:after { content: ""; display: table; clear: both; }
body .hidden { display: none; }
body .fleft { float: left; }
body .fright { float: right; }
body .menuSlider { font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; border: 1px solid #aaa; margin: 0 auto; }
body .menuSlider p { margin: 0; }
body .menuSlider.w175 { width: 173px; }
body .menuSlider.w175 .previous, body .menuSlider.w175 .next { width: 130px; }
body .menuSlider.w175 .previousButton, body .menuSlider.w175 .nextButton { width: 32px; }
body .menuSlider.w300 { width: 298px; }
body .menuSlider.w300 .previous, body .menuSlider.w300 .next { width: 255px; }
body .menuSlider.w300 .previousButton, body .menuSlider.w300 .nextButton { width: 32px; }
body .menuSlider.resources .bxslider li { color: #ae1f23; font-size: 14px; line-height: 17px; }
body .menuSlider.resources .bxslider li span { font-weight: bold; font-size: 9px; color: #666; text-transform: uppercase; }
body .menuSlider.resources .bxslider li:hover span { color: #000; }
body .previous, body .next { color: #b3b3b3; border-right: 1px solid #aaa; text-transform: uppercase; float: left; text-align: right; padding-right: 10px; font-size: 9px; font-weight: bold;...

JavaScript

$( document ).ready(function() {
	slider1 = $('.slider1 .bxslider').bxSlider({
		autoControls: true,
		mode: 'vertical',
		infiniteLoop: false,
		hideControlOnEnd: true,
		prevText: '&#9650',
		nextText: '&#9660',
		minSlides: 4,
		maxSlides: 3
	});
	slider2 = $('.slider2 .bxslider').bxSlider({
		autoControls: true,
		mode: 'vertical',
		infiniteLoop: false,
		hideControlOnEnd: true,
		prevText: '&#9650',
		nextText: '&#9660',
		minSlides: 4,
		maxSlides: 3
	});
	$('.bx-wrapper').each(function(){
			console.log('.bx-wrapper');		
		$('.bx-next',this).each(function(){
			console.log('.bx-next');
			if(!$(this).hasClass('disabled')){
				$(this).parentsUntil('menuSlider').children('.next').css('color','#000');
			}else{
			}
		});
		$('a.bx-next', this).click(function(){
			if($(this).hasClass('disabled')){
				$(this).parentsUntil('menuSlider').children('.next').css('color','#b3b3b3');
				if(!$(this).parentsUntil('bx-controls-direction').children('.bx-prev').hasClass('disabled')){
					$(this).parentsUntil('menuSlider').children('.previous').css('color','#000');
				}
			}else{
				$(this).parentsUntil('menuSlider').children('.next').css('color','#000');
				$(this).parentsUntil('menuSlider').children('.previous').css('color','#000');
			}
		});
		$('a.bx-prev', this).click(function(){
			if($(this).hasClass('disabled')){
				$(this).parentsUntil('menuSlider').children('.previous').css('color','#b3b3b3');
				if(!$(this).parentsUntil('bx-controls-direction').children('.bx-next').hasClass('disabled')){
					$(this).parentsUntil('menuSlider').children('.next').css('color','#000');
				}
			}else{
				$(this).parentsUntil('menuSlider').children('.next').css('color','#000');
				$(this).parentsUntil('menuSlider').children('.previous').css('color','#000');
			}
		});
	});
	$('.slider1 .bx-next').appendTo('.slider1 > .nextButton');
	$('.slider1 .bx-prev').appendTo('.slider1 > .previousButton');
	$('.slider2 .bx-next').appendTo('.slider2 > .nextButton');
	$('.slider2...