I would like to remove arrows on iDangerous Swiper Slider unless the arrows are needed. For example, I currently have 4 images side by side. If a user is on a mobile device (or a smaller computer screen), and less than 4 images show up, then I want the arrows to show up so that the user can scroll. However, if all 4 of the images show up, then I don't want the arrows to appear.
I tried to do this with jQuery, but the following code doesn't work:
<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>
That didn't work. In fact, it messed up the slider (instead of having 4 separate images, I had one image across the screen. Then I replaced the last part with the following code, and it changed it to one image across the screen again, and the arrows were still there.
var swiper__slidecount = mySwiper.slides.length;
if (swiper__slidecount > 3) {
$('.swiper-button-prev,.swiper-button-next').remove();
}
Here's a link to the website Here's a JS Fiddle link. Strangely enough, the code that works on my website doesn't work on JS Fiddle, which has confused me even more.
I would like to remove arrows on iDangerous Swiper Slider unless the arrows are needed. For example, I currently have 4 images side by side. If a user is on a mobile device (or a smaller computer screen), and less than 4 images show up, then I want the arrows to show up so that the user can scroll. However, if all 4 of the images show up, then I don't want the arrows to appear.
I tried to do this with jQuery, but the following code doesn't work:
<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>
That didn't work. In fact, it messed up the slider (instead of having 4 separate images, I had one image across the screen. Then I replaced the last part with the following code, and it changed it to one image across the screen again, and the arrows were still there.
var swiper__slidecount = mySwiper.slides.length;
if (swiper__slidecount > 3) {
$('.swiper-button-prev,.swiper-button-next').remove();
}
Here's a link to the website Here's a JS Fiddle link. Strangely enough, the code that works on my website doesn't work on JS Fiddle, which has confused me even more.
Share Improve this question edited Mar 25, 2024 at 11:48 Harrison 2,35712 gold badges22 silver badges44 bronze badges asked May 9, 2018 at 14:04 user9762321user9762321 931 gold badge2 silver badges10 bronze badges4 Answers
Reset to default 7I managed to get this working using another way though. I just wanted to show the navigation arrows when they were not 'disabled'.
On Swiper API we have disabledClass, which is the class to be applied when the arrows are disabled (no navigation to be done, i.e. beginning or end of the slider).
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'disabled_swiper_button'
},
and then on the css side just simply:
.disabled_swiper_button {
opacity: 0;
cursor: auto;
pointer-events: none;
}
Can you please check it out i have created a snippet for you and i will explain i have created a function that check the view port as its defined in swiper breakpoints when the viewport less than 1024 which is 3 slides then the arrow will appear once is greater than 1024 then the arrow will disappear as long as its 4 slides as you wanted.
Fiddle https://jsfiddle.net/61LLnfh7/6/
var mySwiper = new Swiper('.swiper-container', {
slidesPerView: 4,
slidesPerGroup: 4,
loopedSlides: 4,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
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,
}
},
on: {
init: function() {
checkArrow();
},
resize: function () {
checkArrow();
}
}
});
function checkArrow() {
var swiperPrev = document.querySelector('.swiper-button-prev');
var swiperNext = document.querySelector('.swiper-button-next');
if ( window.innerWidth < 1024 ) {
console.log('Success', window.innerWidth);
swiperPrev.style.display = 'block';
swiperNext.style.display = 'block';
} else {
swiperPrev.style.display = 'none';
swiperNext.style.display = 'none';
}
}.swiper-wrapper .swiper-slide {
background-color: #eee;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-button-prev,
.swiper-button-next {
display: none;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>I was searching for the answer too hence dropped here. My requirement was to hide the arrows if the website was on mobile so I used the following code to make it working ->
CSS ->
.swiper-button-next,
.swiper-button-prev{
visibility: hidden;
}
HTML ->
<div class="swiper-button-next" ></div>
<div class="swiper-button-prev" ></div>
My first thought would be to
console.log(slides);
And check and see what number it has at the the time its run.
Also fix console error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at (index):449
Looks like this element is not being found:
document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {