JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://flickity.metafizzy.co/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="http://flickity.metafizzy.co/css/flickity-docs.css">
<ul class"menu">
    <li data-eq="0">Пункт меню</li>
    <li data-eq="1">Пункт меню</li>
    <li data-eq="2">Пункт меню</li>
    <li data-eq="3">Пункт меню</li>
</ul>










<div class="hero-gallery js-flickity">
  <div class="hero-gallery__cell hero-gallery__cell--1">
    <div class="content-wrap">
      <h1>Flickity beta</h1>
      <p class="tagline">Touch, responsive, flickable galleries</p>
    </div>
  </div>
  <div class="hero-gallery__cell hero-gallery__cell--2">
    <div class="content-wrap">
      <p class="slogan slogan--easy">Easy to use.</p>
      <p class="slogan slogan--fun">Fun to flick.</p>
      <p class="slogan slogan--tagline">Flickity makes galleries, sliders, &amp; carousels that feel lively and effortless.</p>
    </div>
  </div>
  <div class="hero-gallery__cell hero-gallery__cell--3">
    <div class="content-wrap">
      <ul class="feature-list">
        <li>Physics-based animation</li>
        <li>Touch enable</li>
        <li>Responsive styling</li>
        <li>Full-feature API</li>
      </ul>
    </div>
  </div>
  <div class="hero-gallery__cell hero-gallery__cell--4">
    <div class="content-wrap">
      <p class="by-line by-line--made">Made by <b>Metafizzy</b>.</p>
      <p class="by-line by-line--you">You make the things that matter.</p>
      <p class="by-line by-line--we">We make the widgets.</p>
    </div>
  </div>
</div>

CSS

li {
    cursor: pointer;
}

li:hover {
    color: red;
}

JavaScript

$('[data-eq]').click(function() {
    $('.flickity-page-dots li').eq($(this).data('eq')).click();
});