JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="wrapper">

  <ul id="nav">
    <li><a href="#" class="goToSlide" data-slide="#about_us_slide">About us</a></li>
    <li><a href="#" class="goToSlide" data-slide="#contact_us_slide">Contact us</a></li>
  </ul>

  <div id="slide_containers">

    <div id="home_slide" class="slide">
      <h1 class="header">Home</h1>
    </div>
      
    <div id="about_us_slide" class="slide">
      <h1 class="header">About us</h1>
    </div>

    <div id="contact_us_slide" class="slide">
      <h1 class="header">Contact us</h1>
    </div>

  </div>
</div>

CSS

#wrapper {
    
}
#nav li {
    float: left;
    margin: 20px;
}
#nav li a {
    display: block;
    padding: 10px;
    border: 1px solid #333;
    background: #eee;
}
#slide_containers {
    clear: both;
    margin: 20px;
    padding: 10px;
    border: 1px solid #333;
    background: #eee;
}
.slide {
    width: 100%;
}
#about_us_slide {
    background: #cea;
}
#contact_us_slide {
    background: #fea;
}

JavaScript

$('#slide_containers').cycle({
    fx: 'scrollHorz',
    speed: 'fast',
    timeout: 0
});

$('.goToSlide').click(function(e) { // Bind click event to all elements with the class goToSlide
  e.preventDefault();
  var selector = $(this).data('slide'); // Get the data-slide attribute value
  //console.log(selector, $(selector), $(selector).index()); // DEBUG
  var slideIndex = $(selector).index(); // Get the index of the slide element
  $('#slide_containers').cycle(slideIndex); // Cycle to slide by index
});