JSFiddle - React, Tailwind, and code Playground

by dezignas

HTML

<script src="http://css-tricks.com/examples/AnythingSlider/js/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="http://css-tricks.com/examples/AnythingSlider/css/anythingslider.css">
    <div class="sidecol padded grid1-3 left">
        <div id="slidercontrols">
            <div class="article gotoslide currentslide">
                <h4> One</h4>
               
            </div>
            
            <div class="article gotoslide">
                <h4>Two</h4>
              
            </div>
            
            <div class="article gotoslide">
                <h4>Three</h4>
              
            </div>
        </div>
    </div>




<div class="pagesize" id="mainmenu">
        <div id="slidercontrols">
<ul id="nav" class="menu">
<li class="item-79 "><a href="#homer" class=" scroll gotoslide currentslide">Home</a></li>
    <li class="item-50"><a href="#bclstudio" class="scroll gotoslide">BCL STUDIO </a></li>
    <li class="item-28"><a href="#clients" class="scroll gotoslide">CLIENTS  </a></li>
    <li class="item-49"><a href="#News" class="scroll gotoslide">NEWS </a></li>
    <li class="item-78"><a href="#comments" class=" scroll gotoslide">COMMENTS  </a></li>
    <li class="item-30"><a href="#Contact" class="scroll gotoslide">Contact Us</a></li>
    </ul>
</div>
      </div>
    
    <div class="padded grid2-3 right">
        <div id="contentslider">
                <ul>
                    <li><h1>Slide #1</h1></li>
                    <li><h1>Slide #2</h1></li>
                    <li><h1>Slide #3</h1></li>
                     <li><h1>Slide #4</h1></li>
                    <li><h1>Slide #5</h1></li>
                    <li><h1>Slide #6</h1></li>
                </ul>
        </div>
     </div>

CSS

.gridfull, .grid1-1, .grid-960 { width: 960px; margin: 0 auto; }
.grid2-3 { width: 640px } 
.grid1-3 { width: 320px } 
.grid1-4 { width: 240px }
.grid3-4 { width: 720px }
.grid1-f { width: 250px }
.padded {padding: 10px;}

.gridfull.padded, .grid1-1.padded, .grid-960.padded { width: 940px; padding: 10px; } 
.grid2-3.padded { width: 620px; padding: 10px; } 
.grid1-3.padded { width: 300px; padding: 10px; } 
.grid1-4.padded { width: 220px; padding: 10px; }
.grid3-4.padded { width: 700px; padding: 10px; }
.left {float: left}
.right {float:right}

.gotoslide-1, .gotoslide-2, .gotoslide-3, .gotoslide-4, .gotoslide-5, .gotoslide-6, .gotoslide-7, .gotoslide-8, .gotoslide-9, .gotoslide-10 {
    cursor: pointer;
    border-bottom: solid green 1px; 
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.currentslide h4, .currentslide h3, .currentslide p, .currentslide li {
    color: #aaa;
}
.currentslide img {
      filter:alpha(opacity=60);
      opacity:0.6;
}

#contentslider ul li {
    background-color: silver;
}


#mainmenu {
display:block;
    width:100%;
    height:40px;
}

#nav { display:block;
list-style:none;}

#nav li {
float:left;
display:block;
margim:4px 6px;
padding:4px 6px;}

JavaScript

$(function(){
                $('#contentslider ul').anythingSlider({
                    width            : 320,
                    height            : 215,
                    startStopped    : true,
                    forwardText        :"&nbsp;",
                    backText        :"&nbsp;",
                    delay            : 6000,
                    easing            : 'easeInOutExpo',
//                    buildArrows        : false,
                    hasgTags        : false,
//                    appendControlsTo: "#slidercontrols",
                    buildNavigation    : false
                });
                
                
                // Slide navigation. 
                $(".gotoslide").click(function(){
                    $('#contentslider ul').anythingSlider($(this).index()+1, function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
                    $("#slidercontrols > div").removeClass("currentslide");
                    $(this).addClass("currentslide");
                    return false;
                });
                
                
                 $("#nav").click(function(){
                    $('#contentslider ul').anythingSlider($(this).index()+1, function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
                    $("#slidercontrols > div").removeClass("currentslide");
                    $(this).addClass("currentslide");
                    return false;
                });
                
                
            });