JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<ul class="slick-dots" style="display: block;">
    <li aria-hidden="true">
        <div style="width:100%;height:100%;">
            asdf
        </div>
    </li>
    <li aria-hidden="true">
        <div style="width:100%;height:100%;">
            asdf
        </div>
    </li>
    <li aria-hidden="true">
        <div style="width:100%;height:100%;">
            asdf
        </div>
    </li>
    <li aria-hidden="false" class="slick-active">
        <div style="width:100%;height:100%;">
            asdf
        </div>
    </li>
</ul>

CSS

ul {
  width: 50%;
}

li {
  height: 30px;
  background: grey;
  margin: 10px;
}

JavaScript

// fake event
$(document).on('click', 'ul.slick-dots li', function() {
	$(this).css('background', 'red');
});


// trigger first child
//$('ul.slick-dots').children('li').get(0).click();
//$('ul.slick-dots').children('li:first-child').click();

// trigger second child
//$('ul.slick-dots').children('li').get(1).click();

// trigger last child
//$('ul.slick-dots').children('li').get(3).click();
//$('ul.slick-dots').children('li:last-child').click();

// trigger all
//$('ul.slick-dots').children('li').each(function() { $(this).click(); })