我正在尝试进行类似旋转木马的导航和导航。
这个脚本的工作方式几乎和我预期的一样: 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/
箭头应该起作用,但它们不起作用。拜托,我需要你的帮助!
答案 0 :(得分:1)
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">←</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">→</div>
</div>
<div class="subcategory-navigation dropdown">
<div class="go-left">←</div>
<div class="subcategory-navigation-container">
<ul>
<li>
<a href="#">
<div>Subitem 1</div>
</a>
</li>
</ul>
</div>
<div class="go-right">→</div>
</div>