JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul class="tslider">
  <li>
    <div class="user_img"><img src="01.png" /> </div>
  </li>
  <li>
    <div class="user_img"><img src="02.png" /> </div>
  </li>
  <li>
    <div class="user_img"><img src="03.jpg" /> </div>
  </li>
</ul>
<div class="bx-pager bx-default-pager">
  <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="0" href="">1</a></div>
  <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="1" href="">2</a></div>
  <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="2" href="">3</a></div>
</div>

JavaScript

var links = $('div.bx-pager.bx-default-pager a.bx-pager-link').empty(),
images = $('ul.tslider div img');

links.append(function(i,el) {
  return images.eq(i);
});