Mixitup does not display elements

Question

Goodnight,
I’ve been trying to use the Mixitup plugin to modify the Thumbs of an image gallery, however, the images are always not shown (as initially the plugin asks), I can’t identify what the reason of the plugin does not show the elements, someone could help me ?

Jsfiddle: https://jsfiddle.net/eva7b90u/

$(function(){
    $('#Grid').mixitup();
});

#Grid .mix{

	display:none;
}

<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.9"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<div class="col-sm-4 btn-group hidden-sm hidden-xs">
                <button type="button" class="btn btn-sm filter" data-filter="all">
                  Todos
                </button>
                <button type="button" class="btn btn-sm filter" data-filter=".category-2">
                  Trilho
                </button>
                <button type="button" class="btn btn-sm" data-filter=".category-1">
                  Varão
                </button>
              </div> 

<div class="col-sm-2 hidden-sm hidden-xs" id="slider-thumbs">
        
            <!-- thumb navigation carousel items -->
          <ul class="list-inline mCustomScrollbar" data-mcs-theme="dark-3" id="Grid">


          <li class="hvr-pulse-grow mix category-1" data-cat="1"> <a id="carousel-selector-0" class="selected">
            <img src="modal/cortinas/1.jpg" class="img-responsive" alt="Cortina">
          </a></li>

          <li class="hvr-pulse-grow mix category-1" data-cat="1"> <a id="carousel-selector-1">
            <img src="modal/cortinas/2.jpg" class="img-responsive" alt="Cortina">
          </a></li>

          <li class="hvr-pulse-grow mix category-1" data-cat="1"> <a id="carousel-selector-2">
            <img src="modal/cortinas/3.jpg" class="img-responsive" alt="Cortina">
          </a></li>

          <li class="hvr-pulse-grow mix category-1" data-cat="1"> <a id="carousel-selector-3">
            <img src="modal/cortinas/4.jpg" class="img-responsive" alt="Cortina">
          </a></li>

          <li class="hvr-pulse-grow mix category-1" data-cat="1"> <a id="carousel-selector-4">
            <img src="modal/cortinas/5.jpg" class="img-responsive" alt="Cortina">
          </a></li>

          <li class="hvr-pulse-grow mix category-2" data-cat="2"> <a id="carousel-selector-5">
            <img src="modal/cortinas/6.jpg" class="img-responsive" alt="Cortina">
          </a></li>

          <li class="hvr-pulse-grow mix category-2" data-cat="2"> <a id="carousel-selector-6">
            <img src="modal/cortinas/7.jpg" class="img-responsive" alt="Cortina">
          </a></li>

          <li class="hvr-pulse-grow mix category-2" data-cat="2"> <a id="carousel-selector-7">
            <img src="modal/cortinas/8.jpg" class="img-responsive" alt="Cortina">
          </a></li>

          <li class="hvr-pulse-grow mix category-2" data-cat="2"> <a id="carousel-selector-8">
            <img src="modal/cortinas/9.jpg" class="img-responsive" alt="Cortina">
          </a></li>

          <li class="hvr-pulse-grow mix category-2" data-cat="2"> <a id="carousel-selector-9">
            <img src="modal/cortinas/10.jpg" class="img-responsive" alt="Cortina">
          </a></li>
          <li class="gap"></li>

            </ul>
        
    </div>

(There are other elements, but they are not related to the problem, they are more aesthetic)

Thank you in advance.