The arrow buttons of Menucool jQuery Slider don't work properly

Question

I placed individual images from my computer within the li secton of the html. My plan was to have multiple slider images within one slider and to manually press the arrow buttons to proceed to the next group of images. I have researched and gathered what I have thought to be the correct code to create a slideshow with multiple images showing at one time. I was aiming to have 4 images show at a time and then go to the next 4 images when the arrow button was pressed.

Below is my code. I'm assuming there is a problem with my jQuery code since the arrow buttons do not seem to function correctly. Any help would be appreciated.

var thumbnailSliderOptions = {
  sliderId: "imageSlider",
  orientation: "horizontal",
  thumbWidth: "220px",
  thumbHeight: "170px",
  showMode: 1,
  autoAdvance: true,
  selectable: true,
  slideInterval: 3000,
  transitionSpeed: 300,
  shuffle: false,
  startSlideIndex: 0,
  pauseOnHover: true,
  initSliderByCallingInitFunc: false,
  rightGap: 0,
  keyboardNav: true,
  mousewheelNav: false,
  before: null,
  license: "yourlicensekey"
};
var mcThumbnailSlider = new ThumbnailSlider(thumbnailSliderOptions);

#thumbnail-slider {
  margin: 0 auto;
  width: 100%;
  padding: 20px;
  background-color: #f2f1ea;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  box-sizing: border-box;
  position: relative;
  user-select: none;
}
#thumbnail-slider div.inner {
  position: relative;
  overflow: hidden;
  padding: 2px 0;
  margin: 0;
}
#thumbnail-slider div.inner ul {
  white-space: nowrap;
  position: relative;
  left: 0;
  top: 0;
  list-style:none;
  font-size: 0;
  padding: 0;
  margin:0;
  float: left: !important;
  width: auto !important;
  height: auto !important;
}
#thumbnail-slider ul li {
  display: inline-block;
  opacity: 0.8;
  margin: 0;
  margin-right: 5px;
  border: 3px solid black;
  transition: border-color 0.3s;
  box-sizing: content-box;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  position: relative;
  list-style: none;
  backface-visibility: hidden;
}
#thumbnail-slider ul li.active {
  opacity: 0.5;
  border-color: white;
}
#thumbnail-slider .thumb {
  opacity: 1;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  position: absolute;
  font-size: 0;
}
#thumbnail-slider li:hover {
  opacity: 1;
}

#thumbnail-slider-prev, #thumbnail-slider-next {
  opacity: 1;
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  backface-visibility: hidden;
  width: 32px;
  height: 48px;
  line-height: 48px;
  top: 50%;
  margin: 0;
  margin-top: -24px;
  color: #000;
  z-index: 10;
  cursor: pointer;
}
#thumbnail-slider-prev {
  left: 0;
  right: auto;
}
#thumbnail-slider-next {
  left: auto;
  right: 0px;
}
#thumbnail-slider-next.disabled, #thumbnail-slider-prev.disabled {
  cursor: default;
  opacity: 0.3;
}
/* arrows */
#thumbnail-slider-prev::before, #thumbnail-slider-next::before {
  position: absolute;
  top: 16px;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-left: 3px solid black;
  border-top: 3px solid black;
}
#thumbnail-slider-prev::before {
  left: 13px;
  transform: rotate(-45deg);
}
#thumbnail-slider-next::before {
  right: 13px;
  transform: rotate(135deg);
}

 <div id="thumbnail-slider">
     <div class="inner">
      <ul>
        <li><img class="thumb" src="C:\Users\brand\OneDrive\Desktop\Images\kenya2.jpg" alt="photo1">
        </li>
        <li><img class="thumb" src="C:\Users\brand\OneDrive\Desktop\Images\safari6.jpg" alt="photo2">
        </li>
       <li><img class="thumb" src="C:\Users\brand\OneDrive\Desktop\Images\safari5.jpg" alt="photo3">
       </li>
       <li><img class="thumb" src="C:\Users\brand\OneDrive\Desktop\Images\safari002.jpg" alt="photo4">
       </li>
       <li><img class="thumb" src="C:\Users\brand\OneDrive\Desktop\Images\safari13.jpg" alt="photo5">
       </li>
       <li><img class="thumb" src="C:\Users\brand\OneDrive\Desktop\Images\safari21.jpg" alt="photo6">
       </li>
       <li><img class="thumb" src="C:\Users\brand\OneDrive\Desktop\Images\safari9.jpg" alt="photo7">
       </li>
       <li><img class="thumb" src="C:\Users\brand\OneDrive\Desktop\Images\tanzania2.jpg" alt="photo8">
       </li>
       <li><img class="thumb" src="C:\Users\brand\OneDrive\Desktop\Images\safari11.jpg" alt="photo9">
       </li>
     </ul>
    </div>
    <div id="thumbnail-slider-prev"></div>
    <div id="thumbnail-slider-next"></div>
  </div>

Answer 1

Menucool's jQuery-slider, the plugin you are using, requires a license key.

From its docs:

If the validation failed (the domain name doesn't match the license key), the UI component may periodically display a trial version alert, or even disable some functionalities.

Looking at your code, it seems that you don't have one:

var thumbnailSliderOptions = {
  ...
  license: "yourlicensekey"
};

You may want to use a more popular plugin (GitHub star-system and their availability on a CDN might be good indicators). You have mentioned Slick; I have used and think it is a nice option.