JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.ahmbrands.com/jquery.cycle.all.js"></script>
<section id="slideShow">
    <h1>Recent Work<span> // Landscape Architecture</span></h1>
        <div id="pager">&nbsp;</div>
    <ul>
    <li class="planning">
      <h2>Planning Headline One</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="planning">
      <h2>Planning Headline Two</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="landscape">
      <h2>Landscape Headline One</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="landscape">
      <h2>Landscape Headline Two</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="environmental">
      <h2>Environmental Headline One</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="environmental">
      <h2>Environmental Headline Two</h2>
      <p>Lorem Ipsum</p>
    </li>
    </ul>
</section>

CSS

#slideShow {
    border: 1px #CCC solid;
    margin-top:45px;
    padding-top:30px;
}

#slideShow ul {
    width:820px;
    height:540px;
}

/* Slide Selector */
section#slideShow h1 {
    display:inline;
    font:bolder .75em/4em Tahoma, Geneva, sans-serif;
    color:rgb(97,58,17);
    padding-left:30px;
}
section#slideShow h1 span{
    color:rgb(145,145,145);
    font-weight:lighter;
}
#pager{
    width:390px;
    height:auto;
    margin:0 auto;
    padding:0px 30px 11px 0;
    /*background:transparent url("/images/pager_inactive.png") top center repeat;*/
    text-align:right;
    float:right;
}
#pager a{
    background: url("images/pager_inactive.png") no-repeat;
    display:inline-block;
    font-size:0px;
    width:12px;
    height:12px;
    margin:6px 4px 0px 4px;
    padding:0;
    outline-style:none;
    outline-width:medium;
    text-indent:-9999px;
}
#pager .activeSlide{
    background: url("images/pager_active.png") no-repeat;
}

/* Slideshow Project Descriptions */
#slideShow ul li h2 {
    padding:20px 0px 10px 30px;
    font:lighter .75em/.75em Georgia, "Times New Roman", Times, serif;
    color:rgb(107,144,67);
}
#slideShow ul li h2 span#project_location{
    font-size:.95em;
    font-family:Tahoma, Geneva, sans-serif;
    color:rgb(145,145,145);
}
#slideShow ul li h2 span#project_class{
    font-style:italic;
    color:rgb(145,145,145);
}
#slideShow ul li p{
    padding:0px 30px 30px 30px;
    font:lighter .7em/1.45em Tahoma, Geneva, sans-serif;
    color:rgb(145,145,145);
}
#slideShow ul li p a {
    border:none;
    text-decoration:none;
    font-family: Georgia, "Times New Roman", Times, serif;
    color:rgb(107,144,67);
    margin:0px 10px;
    padding:0px 10px;
    background:transparent url(images/link_arrow_bg.jpg) left center no-repeat;
}

JavaScript

$(function(){     

    $('#slideShow ul').cycle({
    
    timeout: 4200,  // milliseconds between slide transitions (0 to disable auto advance)
    
    fx:      'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...            
    
    pager:   '#pager',  // selector for element to use as pager container
    
    pause:   true,      // true to enable "pause on hover"
    
    cleartypeNoBg: true, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
    
    pauseOnPagerHover: 1, // true to pause when hovering over pager link
    
    before: onBefore
    });

});

function onBefore() {
    var theid = $(this).attr('class');
    if($(this).is($('#slideShow ul li.planning'))){
    
    } else if ($(this).is($('#slideShow ul li.landscape'))){
        
        if ($(this).is($('#slideShow ul li.landscape:first'))){
            alert('First Landscape');
        }
        
    } else if ($(this).is($('#slideShow ul li.environmental'))){
           
    }
}