Menucool jQuery Slider 的箭头按钮不能正常工作

Question

我将计算机中的个人图像放在 html 的 li 部分中。我的计划是在一个滑块中包含多个滑块图像，并手动按下箭头按钮以继续下一组图像。我已经研究并收集了我认为是创建一次显示多个图像的幻灯片的正确代码。我的目标是一次显示 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, the plugin you are using, 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；我用过，觉得是个不错的选择。

Menucool jQuery Slider 的箭头按钮不能正常工作

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

jquery

jquery-ui-slider