JSFiddle - React, Tailwind, and code Playground

by elcoyote67

HTML

<link rel="stylesheet" type="text/css" media="screen" href="http://kevinbatdorf.github.com/codaslider/css/coda-slider.css">

  <script src="http://kevinbatdorf.github.com/codaslider/js/jquery-1.7.2.min.js"></script>
  <script src="http://kevinbatdorf.github.com/codaslider/js/jquery-ui-1.8.20.custom.min.js"></script>
  <script src="http://kevinbatdorf.github.com/codaslider/js/jquery.coda-slider-3.0.js"></script>



      <div class="coda-slider" id="slider-id">
          <div>
              <h2 class="title">Panel 1</h2>
              //Content goes here
          </div>
          <div>
              <h2 class="title">Panel 2</h2>
              //Content goes here
          </div>
      </div>

CSS

.toggler { width: 500px; height: 200px; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
    </style>
    <script>

JavaScript

$().ready(function() {
        $('#main-slider').codaSlider({
          autoHeight: false,
          continuous:false,
          dynamicArrows: false,
          dynamicTabs: false
        });
        $('#showcase').codaSlider();
        $('#continuous').codaSlider({
          autoSlide: true,
          continuous: true,
          dynamicArrowsGraphical: true,
          dynamicTabsAlign: "right",
          dynamicTabsPosition: "bottom",
          panelTitleSelector: "div.title"
        });
        $('#dynamic-tabs').codaSlider({
          autoSlideControls:true,
          dynamicTabsAlign: "left",
          dynamicTabsPosition: "top",
          dynamicArrows: false
        })
        $('#information').codaSlider({
          dynamicArrows: false,
          dynamicTabs: false,
          slideEaseFunction: "easeOutCirc"
        });
      });