Question

我制作了一个非常简单的整页滑块，它使用了一个列表并将第二个列表项保留在视口中。但是现在我已经试图找到一种方法来激活＆＃34;活跃＆＃34;滑动课程（例如＆＃34;活动＆＃34;例如）。因为我知道第二个李总是活跃的，我试图瞄准第n个孩子（2）并以某种方式给它一个活跃的课程但不幸的是我不能让它工作（它变得如此凌乱接近我试试。）

我有没有更容易看到的方式？

CodePen为HERE

HTML

true

CSS

<div id="slider">
  <ul>
    <li>
        <h1>Slide 1</h1>
        <a href="" class="slider__next">Go to slide 2</a>
    </li>
    <li>
        <h1>Slide 2</h1>
        <a href="" class="slider__next">Go to slide 3</a>
    </li>
    <li>
        <h1>Slide 3</h1>
        <a href="" class="slider__next">Go to slide 4</a>
    </li>
    <li>
        <h1>Slide 4</h1>
        <a href="" class="slider__next">Go to slide 5</a>
    </li>
    <li>
        <h1>Slide 5</h1>
        <a href="" class="slider__next">Go to slide 1</a>
    </li>
  </ul>  
</div>

的jQuery

#slider {
  position: relative;
  overflow: hidden;
  margin: 0 auto 0 auto;
  height: 100%;
  width: 100%;
  ul {
        position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
    width: 100%;
    li {
        height: 100%;
        width: 100%;
        position: relative;
        display: block;
      background-color: gray;
        float: left;
        margin: 0;
        padding: 0;
        overflow: scroll;
        .content__container {
                max-width: 55%;
                margin: 15% auto 0 auto;
                h1 {
                    color: #fff;
                }
            }
            .navArrow__right {
                display: flex;
                align-items: center;
                position: fixed;
                top: 50%;
            right: 30px;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            p {
                    font-size: 18px;
                    line-height: 26px;
                    margin-bottom: 0;
                    margin-right: 30px;
                    max-width: 140px;
                }
            }
    }
  }
}

Answer 1

确保为代码添加变量

var current  = 0;

moveRight() {
  if(current <= sliderCount) { // not sure atm if silderCount or sliderCount - 1
     current++;
  } else {
     current = 0;
  }
  sliderItems.removeClass('active'); // remove all actives
  $(sliderItems[current]).addClass('active'); // set active
}

它不是所有imho之后最好的js因为这一切都应该是一个原型或者其他东西，但我认为它会起作用

Answer 2

对moveRight函数的小更新可用于从之前有效的幻灯片中删除active类，并将active类添加到当前幻灯片中：

  function moveRight() {
    var viewportWidth = $(window).outerWidth();
    $('#slider ul').animate({
      left: - viewportWidth
    }, 500, function () {
      $('#slider ul li:first-child').appendTo('#slider ul');
      $('#slider ul').css('left', '');

      // update active slide
      $('#slider ul li.active').removeClass('active');
      $('#slider ul li:nth-child(2)').addClass('active');
    });
  }

更新后的CodePen为here。

尝试确定哪个是简单滑块中的活动幻灯片

2 个答案: