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 ，您正在使用的插件requires a license key。

来自其文档：

  

如果验证失败（域名与许可证密钥不匹配），则UI组件可能会定期显示试用版警报，甚至禁用某些功能。

看着您的代码，看来您没有一个：

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

您可能希望使用更流行的插件（ GitHub 星型系统，它们在CDN上的可用性可能是一个很好的指标）。您已经提到Slick；我曾经使用过，并认为这是一个不错的选择。