Swiper nav arrows outside the swiper-container

See original GitHub issue

Hi guys, I’m trying to display the nav arrows outside the swiper-container and not over the slider. I tried positioning with CSS:

.swiper-button-next, .swiper-container-rtl .swiper-button-prev{ right:-20px; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ background-image:url(assets/img/swiper-left.png); left:-20px; }

But the arrows won’t display because of the swiper-container CSS overflow: hidden;

So I tried moving the nav arrows outside the swiper-container, now they display but they effect all the Swipers in the page.

My Swiper is configured like this:

initialize swiper */ var mySwiper = new Swiper ('.swiper-container', { // Optional parameters nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', slidesPerView: 2, spaceBetween: 30, loop: true });

Any ideas?

Issue Analytics

State:
Created 6 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

4reactions

mlangonecommented, May 2, 2017

Have you tried to simply put the swiper-button-next,prev outside the swiper-container then adjust with css?

<div class="someWrapper">
	<div class="swiper-button-next"></div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">Slide 1</div>
				<div class="swiper-slide">Slide 2</div>
			</div>
		</div>
	<div class="swiper-button-prev"></div>
</div>  
.somewrapper{
position:relative;
}

0reactions

lock[bot]commented, Jun 25, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Top Results From Across the Web

CSS - How to have swiper slider arrows outside of slider that ...

The padding within the slide will create a gap with the .video-card-inner element that will house all of your content, thus allowing the...

swiper arrow outer - CodePen

<div class="swiper-container">. 4. <div class="swiper-wrapper">. 5. <div class="swiper-slide">. 6. <img src="https://picsum.photos/500/400?random=1" ...

CSS - How to have swiper slider arrows outside of ... - YouTube

HTML : CSS - How to have swiper slider arrows outside of slider that takes up 12 column row [ Gift : Animated...

[Swiper] How to put arrows and dots outside of slider

In this article, I am going to describe how to put arrows and dots outside of swiper slider with demo.

CSS - How to have swiper slider arrows outside - 9to5Answer

Solution 1 ⭐ I just did this for one of my current projects. You just have to change the location of the navigation...