Jquery Carousel 不会重置为开头和布局问题答案

【问题标题】：Jquery Carousel won't reset to beginning and layout issueJquery Carousel 不会重置为开头和布局问题
【发布时间】：2015-07-06 04:46:53
【问题描述】：

我似乎无法让最后一张幻灯片返回到第一张幻灯片。单击上一张幻灯片时，我也遇到了问题，下一张幻灯片在当前幻灯片下方一秒钟。如果有人有任何建议，将不胜感激。不幸的是没有上传网站所以这里是代码：

var main = function() {
  $('.next-arrow').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();
    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();

    if (nextSlide.length === 0) {
      nextSlide = $('.slide').first();
      nextDot = $('.dot').first();
    };

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');

  });

  $('.prev-arrow').click(function() {
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();
    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();

    if (prevSlide.length === 0) {
      nextSlide = $('.slide').last();
      nextDot = $('.dot').last();
    };

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');

    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');

  });




};

$(document).ready(main);

.s-bar {
      text-align: center;
      position: relative;
      background-color: transparent;
    }
    .s-dots {
      list-style: none;
      display: inline-block;
      padding: 0;
      margin: 0;
    }
    .s-dots > li {
      list-style: none;
      display: inline;
    }
    .active-dot {
      opacity: 0.5;
    }
    .prev,
    .next {
      width: 20px;
      height: 40px;
    }
    .carousel-text {
      font-family: 'Dancing Script', cursive;
      text-align: left;
      font-size: 1.8em;
      color: #ffffff;
      position: absolute;
      left: 30px;
      top: 30px;
    }
    .slide {
      display: none;
      position: absolute;
      top: 80;
      left: 50%;
      margin-left: -500px;
      width: 1000px;
      height: 360px;
    }
    .active-slide {
      left: 0;
      display: block;
      position: relative;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      width: 1000px;
      height: 360px;
      z-index: -1;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-main">
  <div class="carousel">
    <div class="slide active-slide">
      <div class="pic">
        <img src="pic1.png" width="1000" height="360">
        <div class="carousel-text">
          <h1>Welcome to the Shabby to Chic Workshop.</h1>
        </div>
      </div>
    </div>
    <div class="slide">
      <div class="pic">
        <img src="pic2.png" width="1000" height="360">
        <div class="carousel-text">
          <h1>We make custom furmiture.</h1>
        </div>
      </div>
    </div>
    <div class="slide">
      <div class="pic">
        <img src="pic3.png" width="1000" height="360">
        <div class="carousel-text">
          <h1>Come visit us today!</h1>
        </div>
      </div>
    </div>
    <div class="s-bar">
      <a href="#" class="prev-arrow">
        <img src="la.png" width="20" height="40">
      </a>
      <ul class="s-dots">
        <li class="dot active-dot">
          <img src="dot.png" width="10" height="40">
        </li>
        <li class="dot">
          <img src="dot.png" width="10" height="40">
        </li>
        <li class="dot">
          <img src="dot.png" width="10" height="40">
        </li>
      </ul>
      <a href="#" class="next-arrow">
        <img src="ra.png" width="20" height="40">
      </a>
    </div>
  </div>

【问题讨论】：

标签： jquery html css carousel

【解决方案1】：

您应该在if 之后将prev 点击处理程序的代码更改为：

nextDot.addClass('active-dot');

和

nextSlide.fadeIn(600).addClass('active-slide');

此外，在 CSS 中您有 next 和 prev 类，而在 HTML 中，您有 next-arrow 和 prev-arrow。他们应该是一样的。希望这会有所帮助。

【讨论】：

您好，感谢您的回复。我改变了 nextDot.addClass('active-dot');和建议的CSS。尽管我认为 nextSlide 应该是 prevSlide。无论如何，我都尝试了，但仍然没有喜悦:(

【解决方案2】：

我已经设法拿到了旋转木马，所以它现在开始循环了。使用 Firebug 后，我意识到“.slide”类需要包含在另一个 div 中，“.active-slide”类被添加到“.s-bar”中，因此不显示第一张幻灯片。对于布局问题，我将“.active-slide”更改为显示：绝对，而不是块。两个块都暂时有两张幻灯片是导致问题的原因。

【讨论】：