JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<script src="http://dl.dropbox.com/u/36474499/slidtest/jquery.easing.1.3.js"></script>
<script src="http://dl.dropbox.com/u/36474499/slidtest/jquery.bxSlider.min.js"></script>
<div class="demo-wrap">
<ul id="slider1">
  <li>

      <img src="http://dl.dropbox.com/u/36474499/slidtest/111012.jpg" />

  </li>
  <li>

      <img src="http://dl.dropbox.com/u/36474499/slidtest/110916ll01.jpg" />

  </li>
  <li>
  
      <img src="http://dl.dropbox.com/u/36474499/slidtest/110909.jpg" />


  </li>
  <li>

      <img src="http://dl.dropbox.com/u/36474499/slidtest/110910_2.jpg" />

  </li>
</ul>
</div>
</div><div class="field field-name-field-custom field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><div class="thumbs">
    <a href=""><img src="http://dl.dropbox.com/u/36474499/slidtest/111012navi.jpg" /></a>
    <a href=""><img src="http://dl.dropbox.com/u/36474499/slidtest/110909navi.jpg" /></a>
    <a href=""><img src="http://dl.dropbox.com/u/36474499/slidtest/110910_2navi.jpg" /></a>
    <a href=""><img src="http://dl.dropbox.com/u/36474499/slidtest/110916ll01navi.jpg" /></a>
</div></div></div></div>

CSS

/* @override 
    http://bxslider.localhost/sites/all/themes/bx/css/bx.css?lprlyk
*/

/*

Colors:
    red:        #de312a
    dark gray:  #525044
    light gray: #838383
    baige:      #f1eee7

*/

@font-face {
    font-family: 'MuseoSans';
    src: url('../fonts/MuseoSans_500-webfont.eot');
    src: url('../fonts/MuseoSans_500-webfont.eot?iefix') format('eot'),
         url('../fonts/MuseoSans_500-webfont.woff') format('woff'),
         url('../fonts/MuseoSans_500-webfont.ttf') format('truetype'),
         url('../fonts/MuseoSans_500-webfont.svg#webfontkQkWxTED') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BebasReg';
    src: url('../fonts/bebas-webfont.eot');
    src: url('../fonts/bebas-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas-webfont.woff') format('woff'),
         url('../fonts/bebas-webfont.ttf') format('truetype'),
         url('../fonts/bebas-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

#skip-link {
    display: none;
}

body {
    background: #d7d4ce;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'BebasReg', Arial;
    font-weight: normal;
    color:  #525044;
}

a {
    text-decoration: none;
}

.clear {
    clear: both;
}

#page {
    font-family: MuseoSans, Arial;
    color:  #525044;
    font-size: 12px;
    background: #f1eee7;
    padding-bottom: 50px;
}

#page-inner {
    width: 960px;
    margin: 0 auto;
}

#right a:hover {
    text-decoration: underline;
}

.btn {
    background: #838383;
    color: #f1eee7;
    border-radius: 3px;
    padding: 5px 10px;
}

div.codeblock {
    padding: 10px;
    margin-bottom: 20px;
    overflow: auto;
}

div.codeblock code {
    font-family: Monaco, monospace;
    line-height: 21px;
    white-space: pre;
}

/* HEADER ------------------------------------------------ */

#header {
    border-bottom: dotted #c3c3c1 1px;
    position: relative;
    padding-bottom:...

JavaScript

$(function(){
  // assign the slider to a variable
  var slider = $('#slider1').bxSlider({
    controls: false
  });

  // assign a click event to the external thumbnails
  $('.thumbs a').click(function(){
   var thumbIndex = $('.thumbs a').index(this);
    // call the "goToSlide" public function
    slider.goToSlide(thumbIndex);
  
    // remove all active classes
    $('.thumbs a').removeClass('pager-active');
    // assisgn "pager-active" to clicked thumb
    $(this).addClass('pager-active');
    // very important! you must kill the links default behavior
    return false;
  });

  // assign "pager-active" class to the first thumb
  $('.thumbs a:first').addClass('pager-active');
});