jquery - Menucool jQuery Slider 的箭头按钮无法正常工作

Question

我将计算机中的各个图像放置在 html 的 li 部分中。我的计划是在一个 slider 内包含多个 slider 图像，并手动按箭头按钮继续处理下一组图像。我研究并收集了我认为正确的代码来创建一次显示多个图像的幻灯片。我的目标是一次显示 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 .

来自其文档:

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.

看看你的代码，似乎你没有:

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

您可能想使用更流行的插件(GitHub 明星系统及其在 CDN 上的可用性可能是很好的指标)。您提到过Slick ;我已经使用过并且认为这是一个不错的选择。