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-mobile-home">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<div class="slick-slider-mobile-home">
  <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-mobile-home {
  background: #fff;
  width: 100%;
  margin: 2em auto;
  padding: 0;
}

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

JavaScript

$( function() {
							
  var $carousel = $('.slick-slider-mobile-home').slick({
 
  });
  var select = $("#select-mobile-home");
  $("#select-mobile-home").change( function() {
  debugger;
    goTo = select.val();
    console.log( goTo );
    $carousel.slick( "goTo", goTo-1 );
  });
});