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">
    <div class="slider1 group menuSlider">
      <div class="previous">Previous</div>
      <div class="previousButton"></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>

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; width: 173px; border: 1px solid #aaa; margin: 0 auto; }
body .menuSlider p { margin: 0; }
body .previous { color: #b3b3b3; }
body .previous, body .next { border-right: 1px solid #aaa; width: 130px; text-transform: uppercase; float: left; text-align: right; padding-right: 10px; font-size: 9px; font-weight: bold; }
body .previousButton, body .nextButton { text-align: center; }
body .previousButton a, body .nextButton a { text-decoration: none; font-size: 16px; color: #ae1f23; font-family: verdana; }
body .previousButton a.disabled, body .nextButton a.disabled { color: #b3b3b3; }
body .previous, body .previousButton { border-bottom: 1px solid #aaa; }
body .next, body .nextButton, body .previous, body .previousButton { background: #e2e2e2; height: 25px; line-height: 25px; }
body .bxslider li { float: left; height: 80px; color: #666; line-height: 14px; padding: 0 10px; border-bottom: 1px solid #aaa; }
body .bxslider li:hover { color: #000; border-left: 4px solid...

JavaScript

slider1 = $('.slider1 .bxslider').bxSlider({
		autoControls: true,
		mode: 'vertical',
		infiniteLoop: false,
		hideControlOnEnd: true,
		prevText: '1P',
		nextText: '1N',
		minSlides: 4,
		maxSlides: 3
	});
    $('.menuSlider').each(function(){
		$('.bx-controls-direction > a.bx-next', this).click(function(){
			console.log('hi');
			if($(this).hasClass('disabled')){
				var temp = $(this).parents().find('div.bx-prev').text;
				// $('.menuSlider', this).find('div.next').css('color','red');
				$(this).parentsUntil('.menuSlider').find('div.next').css('color','red');
				console.log('next is disabled');
				console.log(temp);
			}else{
				$('.menuSlider', this).find('div.next',this).css('color','green');
				// $(this).parent().find($('.previous',this)).css('color','#000');
				console.log('next is not disabled');
			}
		});
	});