如何在滑块中不显示上一个按钮和下一个按钮？

user6571878 发表于 Dev

用户名

我想如果向用户显示的滑块的第一张幻灯片不应该显示＆在显示上一张幻灯片时，下一个按钮应该不显示...

我已经写了这些代码，但是不起作用...：

注意：每张具有.ji-active类的幻灯片都向用户显示...

if ($('.ji-slider div:last').hasClass('ji-active')) {
    $('.ji-next-btn').css('visibility', 'hidden');
} else {
    $('.ji-next-btn').css('visibility', 'visible');
}

if ($('.ji-slider div:first').hasClass('ji-active')) {
    $('.ji-pre-btn').css('visibility', 'hidden');
} else {
    $('.ji-pre-btn').css('visibility', 'visible');
}

我的错是什么？

这是我的HTML：

        <div class="ji-slider" data-animation="fadeIn">
            <div class="ji-active">
                <img src="Images/Slider (1).png">
                <p class="ji-caption">This Is First !</p>
            </div>
            <div>
                <img src="Images/Slider (2).png">
                <p class="ji-caption">This Is Second !</p>
            </div>
            <button type="button" class="ji-pre-btn">&#10094;</button>
            <button type="button" class="ji-next-btn">&#10095; </button>
        </div>

伊万·卡拉曼（Ivan Karaman）

使用简单的CSS，左箭头隐藏在第一张幻灯片上，右箭头隐藏在最后=）

如果不起作用，则添加!important如下内容visibility: hidden !important;

选择同班同学的第一个幻灯片，而.ji-active不是同班同学.ji-pre-btn并隐藏，对于最后一张幻灯片，我使用:last-of-type选择器，因为如果要使用，:last-child则需要选择最后一个div，然后选择“下一个”按钮。

对不起，我的英语不好。

img{
  display:block;
  background-color: black;
  width: 100px;
  height: 100px;
}
.ji-slider{
  background-color: #eee;
}
.ji-slider > div:first-child.ji-active ~ .ji-pre-btn{
  visibility: hidden;
}
.ji-slider > div:last-of-type.ji-active ~ .ji-next-btn{
  visibility: hidden;
}

<div class="ji-slider" data-animation="fadeIn">
            <div class="ji-active">
                <img src="Images/Slider (1).png">
                <p class="ji-caption">This Is First !</p>
            </div>
            <div>
                <img src="Images/Slider (2).png">
                <p class="ji-caption">This Is Second !</p>
            </div>
            <button type="button" class="ji-pre-btn">&#10094;</button>
            <button type="button" class="ji-next-btn">&#10095; </button>
        </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。