The mixitup category filter is failing

Question

I am using a mixitup filter but not able to figure out why its not working.

My HTML code for the filter:

  <!-- Mix it up filter-->
  <section class="work-box">
   <div class="container">
  <div class="row">
   <div class="col-lg-12">
    <div class="box-menu">
      <ul>
        <li class="mixitup-control-active" data-filter="*">All</li>
        <li data-filter=".photo">photography</li>
        <li data-filter=".ui">ui / ux</li>
        <li data-filter=".paint">painting</li>
      </ul>
    </div>
   </div>
   </div>

   <div class="row box-list">
  <div class="col-lg-4 mix box-item photo paint">
    <img src="assets/img/img1.jpg" alt="">
  </div>
  <div class="col-lg-4 mix box-item ui">
    <img src="assets/img/img2.jpg" alt="">
  </div>
  <div class="col-lg-4 mix box-item ui">
    <img src="assets/img/img3.jpg" alt="">
  </div>
  <div class="col-lg-4 mix box-item paint">
    <img src="assets/img/img4.jpg" alt="">
  </div>
  <div class="col-lg-4 mix box-item paint">
    <img src="assets/img/img5.jpg" alt="">
  </div>
  <div class="col-lg-4 mix box-item photo ui">
    <img src="assets/img/img6.jpg" alt="">
  </div>
    </div>
     </div>
    </section>`
  

My javascript code added to my html code:

  <script>
   $(document).ready(function(){
     var mixer = mixitup('.box-list')
     });
    </script>

I also have css code, but i don't think that is needed here. When i press the buttons in my box menu, nothing happens. I am still in the "All" filter. Can anyone please help me find out what the problem is?

This is what i have tried :

1. Removed my javascript code i have in thescript file. Still not working.
2. Tried changing in my cdn links. Removed some, added new.

Sorry for my stupid question. I am very new to webdesigning.

Answer 1

I've tested your code with these CDNs and it is working all right: https://unpkg.com/[email protected]/dist/jquery.js https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js