jQuery导航旋转木马

Question

我正在尝试进行类似旋转木马的导航和子记录。

这个脚本几乎正如我预期的那样工作：https://jsfiddle.net/xpvt214o/23270/

这是应该工作的方式：
如果导航溢出，请让下一个箭头可见。
如果我们向右滚动，请使左箭头可见。
如果导航不会溢出，则隐藏两个箭头。

在第一个脚本中，我有一些问题：
1(两个NAVS的上一条和下一个箭头用于第一个NAV
2(当我向右滚动并真正到达导航的结尾时，我需要再次单击下一个箭头。

---

要使适当的箭头使用导航，我将主代码包装在功能中，然后将$('.go-left')替换为 nav.find('.go-left')，而对于正确的箭头。这是代码：https://jsfiddle.net/0z5u4vyt/5/

箭头应该可以工作，但行不通。拜托，我需要您的帮助！

Answer 1

在您的JavaScript代码var prevArrow = nav.find('.go-left');和var nextArrow = nav.find('.go-right');中没有值，因此将代码更改为

var prevArrow = nav.siblings('.go-left');
var nextArrow = nav.siblings('.go-right');

function navCarousel(el) {
    var nav = el;
    var navFirstItem = nav.find('li:first-child');
    var navLastItem = nav.find('li:last-child');
    var prevArrow = nav.siblings('.go-left');
    var nextArrow = nav.siblings('.go-right');
    function checkNavOverflow() {
      if (nav.prop('scrollWidth') > nav.width() &&
         (nav.find('ul').width() - navLastItem.offset().left) < 51) {
        nextArrow.css('display', 'block');
      } else {
        nextArrow.css('display', 'none');
      }
      if (navFirstItem.offset().left < 15) {
        prevArrow.css('display', 'block');
      } else {
        prevArrow.css('display', 'none');
      }
    }
    checkNavOverflow();
    $(window).on('resize', function() {
      checkNavOverflow();
      // console.log(nav.find('ul').width() - navLastItem.offset().left);
    });
    prevArrow.click(function() {
      var pos = nav.scrollLeft() - 200;
      nav.animate( { scrollLeft: pos }, 300, checkNavOverflow());
    });
    nextArrow.click(function() {
      var pos = nav.scrollLeft() + 200;
      nav.animate( { scrollLeft: pos }, 300, checkNavOverflow());
    });
}
navCarousel($('.category-navigation .category-navigation-container'));
navCarousel($('.subcategory-navigation .subcategory-navigation-container'));

body {
  background: #20262e;
  padding: 0;
  margin: 0;
  font-family: Helvetica;
}
.category-navigation, .subcategory-navigation {
  background-color: #fff;
  position: relative;
  border-bottom: 1px solid grey;
}
.category-navigation-container, .subcategory-navigation-container {
  overflow: hidden;
}
.category-navigation ul, .subcategory-navigation ul {
  list-style: none;
  display: flex;
  white-space: nowrap;
}
.category-navigation ul li, .subcategory-navigation ul li {
  padding: 20px;
}
.category-navigation .go-left, .subcategory-navigation .go-left, .category-navigation .go-right, .subcategory-navigation .go-right {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 20px;
  height: 20px;
  background-color: grey;
  z-index: 9;
  border-radius: 50%;
  padding: 10px;
  text-align: center;
}
.category-navigation .go-left, .subcategory-navigation .go-left {
  left: 0;
}
.category-navigation .go-right, .subcategory-navigation .go-right {
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="category-navigation">
  <div class="go-left">&larr;</div> 
  <div class="category-navigation-container">
    <ul>
      <li><a href="#">Category Item 1</a></li>
      <li><a href="#">Category Item 2</a></li>
      <li><a href="#">Category Item 3</a></li>
      <li><a href="#">Category Item 4</a></li>
      <li><a href="#">Category Item 5</a></li>
      <li><a href="#">Category Item 6</a></li>
      <li><a href="#">Category Item 7</a></li>
      <li><a href="#">Category Item 8</a></li>
      <li><a href="#">Category Item 9</a></li>
    </ul>
  </div>
  <div class="go-right">&rarr;</div>
</div>
<div class="subcategory-navigation dropdown">
  <div class="go-left">&larr;</div>
    <div class="subcategory-navigation-container">
      <ul>
        <li>
          <a href="#">
            <div>Subitem 1</div>
          </a>
        </li>
       </ul> 
    </div>
  <div class="go-right">&rarr;</div>
</div>