自定义JQuery滑块无法正常工作

Question

我试图为我的网站上的项目制作自定义滑块。 对我来说，使用div标签滑动非常重要，因为我想在其中包含更多信息，例如文本和按钮。

它具有“下一个”和“上一个”按钮。 问题是，它不会向后滑动，并且在到达最后一张幻灯片后也不会从头开始。

怎么了？

$(document).ready(function() {

  projectSlider($('.projects').children('.project').first());

  function projectSlider(projects) {
    $(projects).show(function() {
      $('.next').click(function() {
        if (projects.next().hasClass('project')) {
          projectSlider(projects.next());
        } else {

          projectSlider($('.projects').children('.project').first());
        }
      });

      $('.previous').click(function() {
        if (projects.prev().hasClass('project')) {
          projectSlider(projects.prev());
        } else {
          projectSlider($('.projects').children('.project').first());
        }
      });
    });
  }

});

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Roboto Condensed", sans-serif;
}


/* */

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: normal;
}

.inline-list {
  list-style-type: none;
  padding: 0;
}

.inline-list>li {
  display: inline-block;
}


/* */

header {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 35%;
  height: 100vh;
  background: #fff;
}

.profile {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.avatar {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  background: url("../img/avatar.jpg") no-repeat center center;
  background-size: cover;
  border-radius: 100%;
}

.socialmedia>li {
  padding: 0 5px 0 0;
}

.socialmedia>li>a {
  color: #212121;
}


/* */

main {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  background: #EEEEEE;
}

.controls {
  display: block;
  position: absolute;
  z-index: 100000;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.control {
  display: inline-block;
  position: absolute;
  width: 36px;
  height: 36px;
  margin: 0 20px 0 20px;
  background: #f5f5f5;
  color: #212121;
  border-radius: 100%;
  cursor: pointer;
}

.backward {
  left: 0;
  float: left;
  text-align: center;
}

.backward-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: url("../img/icon/left-chevron.svg") no-repeat center center;
  background-size: cover;
  color: #212121;
}

.forward-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: url("../img/icon/right-chevron.svg") no-repeat center center;
  background-size: cover;
  color: #212121;
}

.forward {
  right: 0;
  float: right;
}

.projects {
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
}

.project {
  display: none;
  position: absolute;
  width: 100%;
  height: 100vh;
}

.dog {
  background: red;
}

.cat {
  background: green;
}

.rabbit {
  background: blue;
}


/* */

footer {
  display: block;
  position: relative;
  bottom: 0;
  padding: 0;
  width: 100%;
  height: 36px;
  background: #fff;
}

.made {
  display: inline-block;
  position: absolute;
  float: left;
  left: 0;
  top: 50%;
  height: 38px;
  transform: translateY(-50%);
}

.made>p {
  display: inline-block;
}

.legal {
  display: inline-block;
  position: absolute;
  float: right;
  right: 0;
  top: 50%;
  height: 38px;
  transform: translateY(-50%);
}


/* */

.envelope {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  background: url("../img/icon/envelope.svg") no-repeat center center;
  background-size: cover;
}

.twitter {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  background: url("../img/icon/brands/twitter.svg") no-repeat center center;
  background-size: cover;
}

.dribbble {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  background: url("../img/icon/brands/dribbble.svg") no-repeat center center;
  background-size: cover;
}

.github {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  background: url("../img/icon/brands/github.svg") no-repeat center center;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
  <div class="project-slider">
    <div class="controls">
      <div class="control previous">
        <div class="backward-arrow">&lt;-</div>
      </div>
      <div class="control forward next">
        <div class="forward-arrow">-&gt;</div>
      </div>
    </div>
    <div class="projects">
      <div class="project dog"></div>
      <div class="project cat"></div>
      <div class="project rabbit"></div>
    </div>
  </div>
</main>

JSFiddle

Answer 1

您的代码似乎是不必要的递归。每次单击箭头，都会再次绑定单击处理程序。另外，如果单击“下一个”，则传递给projectSlider的对象仅包含一个项目元素，因此该对象中将没有“下一个”或“上一个”。

我建议使用另一种方法。在下面的示例中，对于每次单击，都会隐藏相应的项目（基于数字索引），然后将其附加到项目容器（将其堆叠在其他容器的顶部），然后重新显示（出于动画目的）。

function refreshProjects(project_holder, projects, project_index) {
  project_index = (project_index + projects.length) % projects.length;
  var thisProject = projects.eq(project_index);
  thisProject.hide().appendTo(project_holder).show(250);
}

$(function() {

  var project_holder = $('.projects');
  var projects = project_holder.children('.project');
  var project_index = 0;

  $('.control-next').click(function() {
    refreshProjects(project_holder, projects, ++project_index);
  });

  $('.control-previous').click(function() {
    refreshProjects(project_holder, projects, --project_index);
  });

});

body {
  padding: 0;
  margin: 0;
  font-size: 10px;
}

main {
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  background: #EEEEEE;
}

.controls {
  position: absolute;
  z-index: 100000;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.control {
  position: absolute;
  background: #f5f5f5;
  border: none;
  color: #212121;
  border-radius: 50%;
  cursor: pointer;
  width: 1.8em;
  height: 1.8em;
  padding: .5em;
  box-sizing: content-box;
  font-size: 1.4em;
  outline: 0;
}
.control-previous {
  left: 1em;
}
.control-next {
  right: 1em;
}

.projects {
  width: 100%;
  height: 100vh;
}
.project {
  position: absolute;
  width: 100%;
  height: 100%;
}
.project:not(:first-child) {
  display: none;
}

.dog {
  background: red;
}
.cat {
  background: green;
}
.rabbit {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
  <div class="project-slider">
    <div class="controls">
      <button type="button" class="control control-previous">&lt;-</button>
      <button type="button" class="control control-next">-&gt;</button>
    </div>
    <div class="projects">
      <div class="project dog"></div>
      <div class="project cat"></div>
      <div class="project rabbit"></div>
    </div>
  </div>
</main>