自定义 Javascript 缩略图滑块

Question

我一直致力于使用 data-src 创建自定义 javascript 缩略图滑块。一切正常，只是下一个按钮和上一个按钮根本不起作用。任何帮助将不胜感激。

这里是codepen的链接

https://codepen.io/mandipluitel/pen/BbOXgZ

我正在使用此代码。

$(document).ready(function(e){
  $(".thumbnails li").click(function(e){
    var thisDataSrc = $(this).attr("data-src");
    var thisDataCount = $(this).children().attr("data-count");
    if(thisDataSrc == "undefined"){}
    else{
      $(this).siblings("li").removeClass("active");
      $(this).addClass("active");
      $(this).parents(".thumbnails").next().find("img").attr("src",thisDataSrc);
      $(this).parents(".thumbnails").next().find("span.number").html("" + thisDataCount + "");
    }
  });

  $("button.next").click(function(e) {
    var currentDiv = 0;

    var newDataSrc = $(this).parents(".slider-hold").prev().find(".active").attr("data-src");
    if(newDataSrc == "undefined"){}
    else{
      currentDiv = currentDiv .next();
      currentDiv.siblings("li").removeClass("active");
      currentDiv.addClass("active");
      currentDiv.parents(".thumbnails").next().find("img").attr("src",newDataSrc);
    }
  });
});

在这里提供帮助。

Answer 1

问题是 currentDiv 设置为零。因此，当您稍后将其设置为 currentDiv.next() 时，它实际上并没有做任何事情。

我相信函数应该像这样开始：

$("button.next").click(function(e) {
    var currentLi = $("li.active");
    var nextLi = currentLi.next();
    if (nextLi) {
        nextLi.siblings("li").removeClass("active");
        nextLi.addClass("active");
        $("#large-image").attr("src",nextLi.attr("data-src"));
    }
});