bxslider text only, when I call js the texts disappear

Question

I have a problem with bxslider, I don’t really know if it’s a problem or if it doesn’t only accept texts. I have this code below:

 <ul class="bxslider row">
  <% student.qrcodes.each do |qrcode| %>
    <li class="col-xs-12 col-sm-4 col-md-4">
      <span class="aluno_<%= qrcode.program.short_name.downcase %>"><%= qrcode.code %></span>
      <small><%= "#{qrcode.program.short_name} - #{qrcode.year_reference}" %></small>
    </li>
  <% end %>
</ul>

That generates me this:

But when I call the JS to activate the slide $('.bxslider').bxSlider(); it happens here:

Simply the "texts" disappear.

Any idea what it might be?

NOTE: Edited, I put the JS code bxslider in the jsfiddle pq did not fit in the post:

https://jsfiddle.net/69krutjL/