Javascript 滑动滑块…移除箭头

我想删除iDangerous Swiper滑块上的箭头，除非需要箭头。例如，我当前有4个并排的图像，如果用户在移动设备（或较小的计算机屏幕）上，并且显示的图像少于4个，那么我希望箭头显示，以便用户可以滚动。但是，如果所有4个图像都显示了，那么我不希望出现箭头

我试着用jQuery来实现这一点，但我所做的一切都不起作用

<script>
var swiper = new Swiper('.swiper-container', {
                slidesPerView: 4,
                slidesPerGroup: 4,
                loopedSlides: 4,
                centeredSlides: false,
                spaceBetween: 0,
                grabCursor: true,
                loop:false,
                pagination: '.swiper-pagination',
                paginationClickable: true,
                breakpoints: {
                    1200: {
                        slidesPerView: 4,
                        loopedSlides: 4,
                        spaceBetween: 10
                    },
                    1024: {
                        slidesPerView: 3,
                        loopedSlides: 3,
                        spaceBetween: 10
                    },
                    768: {
                        slidesPerView: 2,
                        loopedSlides: 2,
                        spaceBetween: 10
                    },
                    675: {
                        slidesPerView: 1,
                        loopedSlides: 1,
                        spaceBetween: 20
                    }
                }
            });
document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
  e.preventDefault();
  swiper.prependSlide([
    '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
    '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
    ]);
});
document.querySelector('.prepend-slide').addEventListener('click', function (e) {
  e.preventDefault();
  swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
});
document.querySelector('.append-slide').addEventListener('click', function (e) {
  e.preventDefault();
  swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
});
document.querySelector('.append-2-slides').addEventListener('click', function (e) {
  e.preventDefault();
  swiper.appendSlide([
    '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
    '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
    ]);
});
var slides = document.querySelectorAll('.swiper-wrapper .swiper-slide');
var arrowPrev = document.querySelector('.swiper-button-prev');
var arrowNext = document.querySelector('.swiper-button-prev');

if (slides.length < 4) {
arrowPrev.style.display = 'none';
arrowNext.style.display = 'none';
 }
 </script>

这里有一个

---

奇怪的是，在我的网站上运行的代码在JS Fiddle上不起作用，这让我更加困惑。

我的第一个想法是

console.log(slides);

并查看它运行时的号码

还修复了控制台错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null
at (index):449

似乎找不到此元素：

document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {

---

我的第一个想法是

console.log(slides);

并查看它运行时的号码

还修复了控制台错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null
at (index):449

似乎找不到此元素：

document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {

---

您能检查一下吗？我已经为您创建了一个代码段，我将解释我创建了一个函数，当视口小于1024即3张幻灯片时，将按照其在swiper断点中的定义检查视图端口，然后箭头将出现一次大于1024只要它的4张幻灯片按您的意愿消失即可

拨弄

var mySwiper=new Swiper（“.Swiper container”{
幻灯片视图：4，
幻灯片组：4，
循环幻灯片：4，
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
断点：{
1200: {
幻灯片视图：4，
循环幻灯片：4，
间隔：10
},
1024: {
幻灯片视图：3，
循环幻灯片：3，
间隔：10
},
768: {
幻灯片视图：2，
循环幻灯片：2，
间隔：10
},
675: {
幻灯片视图：1，
循环幻灯片：1，
间隔时间：20，
}
},
关于：{
init:function（）{
选中箭头（）；
},
调整大小：函数（）{
选中箭头（）；
}
}
});
函数checkArrow（）{
var swiperPrev=document.querySelector（'.swiper-button-prev'）；
var swiperNext=document.querySelector（“.swiper button next”）；
如果（window.innerWidth<1024）{
console.log（'Success'，window.innerWidth）；
swiperPrev.style.display='block'；
swiperNext.style.display='block'；
}否则{
swiperPrev.style.display='none'；
swiperNext.style.display='none'；
}
}

.swiper wrapper.swiper幻灯片{
背景色：#eee；
高度：250px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.swiper按钮prev，
.下一步按swiper按钮{
显示：无；
}

幻灯片1
幻灯片2
幻灯片3
幻灯片4

您能检查一下吗？我已经为您创建了一个代码段，我将解释我创建了一个函数，当视口小于1024个即3张幻灯片时，将按照其在swiper断点中的定义检查视图端口，然后箭头将出现一次大于1024个只要它的4张幻灯片按您的要求播放，它就会消失

拨弄

var mySwiper=new Swiper（“.Swiper container”{
幻灯片视图：4，
幻灯片组：4，
循环幻灯片：4，
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
断点：{
1200: {
幻灯片视图：4，
循环幻灯片：4，
间隔：10
},
1024: {
幻灯片视图：3，
循环幻灯片：3，
间隔：10
},
768: {
幻灯片视图：2，
循环幻灯片：2，
间隔：10
},
675: {
幻灯片视图：1，
循环幻灯片：1，
间隔时间：20，
}
},
关于：{
init:function（）{
选中箭头（）；
},
调整大小：函数（）{
选中箭头（）；
}
}
});
函数checkArrow（）{
var swiperPrev=document.querySelector（'.swiper-button-prev'）；
var swiperNext=document.querySelector（“.swiper button next”）；
如果（window.innerWidth<1024）{
console.log（'Success'，window.innerWidth）；
swiperPrev.style.display='block'；
swiperNext.style.display='block'；
}否则{
swiperPrev.style.display='none'；
swiperNext.style.display='none'；
}
}

.swiper wrapper.swiper幻灯片{
背景色：#eee；
高度：250px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.swiper按钮prev，
.下一步按swiper按钮{
显示：无；
}

幻灯片1
幻灯片2
幻灯片3
幻灯片4

不过，我还是设法用另一种方法来实现这一点。 我只是想在导航箭头未被“禁用”时显示它们

在上，我们有disabledClass，它是禁用箭头时要应用的类（无需进行导航，即滑块的开始或结束）

然后在css方面，只需简单地：

.disabled_swiper_button {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
}

---

不过，我还是设法用另一种方法让它工作起来。 我只是想在导航箭头未被“禁用”时显示它们

在上，我们有disabledClass，它是禁用箭头时要应用的类（无需进行导航，即滑块的开始或结束）

然后在css方面，只需简单地：

.disabled_swiper_button {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
}

---

令人惊叹的。这起作用了。非常感谢你。我会研究你的代码，这样我就可以学习了。不客气，这很好，如果它对你有用，请投它的票。谢谢。这起作用了。非常感谢你。我会研究你的代码，这样我就可以学习了。不客气，这很好，如果它对你有用，请投它的票。谢谢你的回复。上面的回答很有效，但我也会尝试你的建议，这样我可以练习成为一名更好的程序员。非常感谢。谢谢你的信息