JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<select id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<div class="slick-slider">
  <div>
    <p>1</p>
  </div>
  <div>
    <p>2</p>
  </div>
  <div>
    <p>3</p>
  </div>
  <div>
    <p>4</p>
  </div>
  <div>
    <p>5</p>
  </div>   
</div>

CSS

.slick-slider {
  background: #fff;
  width: 100%;
  margin: 2em auto;
  padding: 0;
}

.slick-slider p {
  text-align:center;
  padding:4em 0;
  font-size:35px;
}

JavaScript

$( function() {
							
  var $carousel = $('.slick-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: false,
    autoplay: false,
    draggable: true,
    arrows: false,
    swipe: true,
    speed:200,
    fade: true,
    lazyLoad: 'progressive',
    cssEase: 'linear'
  });
  var select = $("#select");
  $("#select").change( function() {
    goTo = select.val();
    console.log( goTo );
    $carousel.slick( "goTo", goTo-1 );
  });
});