jQuery导航轮播

Question

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

这个脚本的工作方式几乎和我预期的一样： https://jsfiddle.net/xpvt214o/23270/

以下是它应该如何运作：
如果导航溢出，请显示下一个箭头 如果我们向右滚动，请使左箭头可见 如果导航没有溢出，请隐藏两个箭头。

在第一个脚本中我遇到了一些问题：
1）来自两个导航的上一个和下一个箭头用于第一个导航
2）当我向右滚动并真正到达导航结束时，我需要再次点击下一个箭头才能隐藏。

要使适当的箭头与其导航一起使用，我将主代码包装在函数中，并将$('.go-left')替换为nav.find('.go-left')，将右箭头替换为@register_snippet class GalleryCategory(models.Model): text_links = StreamField( [('text', DemoStreamBlock())], null=True, blank=True) panels = [ StreamFieldPanel('text_links'), ] def __str__(self): return self.name 。这是代码： 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>