Кнопки со стрелками в Menucool jQuery Slider не работают должным образом

Question

Я поместил отдельные изображения со своего компьютера в раздел HTML.Мой план состоял в том, чтобы в одном слайдере было несколько изображений слайдеров и вручную нажимать кнопки со стрелками, чтобы перейти к следующей группе изображений.Я исследовал и собрал, как мне кажется, правильный код для создания слайд-шоу с несколькими изображениями, показываемыми одновременно.Я хотел показать 4 изображения одновременно, а затем перейти к следующим 4 изображениям при нажатии кнопки со стрелкой.

Ниже приведен мой код.Я предполагаю, что есть проблема с моим кодом jQuery, так как кнопки со стрелками, кажется, не работают правильно.Любая помощь будет оценена.

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 jQuery-slider , используемый вами плагин, требуется лицензионный ключ .

Из его документов:

Если проверка не удалась (имя домена не соответствует лицензионному ключу), компонент пользовательского интерфейса может периодически отображать предупреждение о пробной версии или даже отключать некоторые функции.

Просмотрв вашем коде кажется, что у вас его нет:

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

Возможно, вы захотите использовать более популярный плагин ( GitHub star-system и их доступность на CDN можетбыть хорошими показателями).Вы упомянули Slick ;Я использовал и думаю, что это хороший вариант.