CSS - How to have swiper slider arrows outside of slider that takes up 12 column row

Question

I am using swiper slider and would like to have navigation arrows outside of the slider. What I would basically like to do is the same as it looks like on airbnb site, where slider with images takes up whole 12 column row, but arrows are outside of it. I am using bootstrap twitter css framework and I have tried various things but nothing worked and don't know how to achieve this?

The css is this:

.swiper-container {
  margin-top: 50px;
  position: relative;
}

.arrow-left {
  position: absolute;
  top: 50%;
  left: 0;
}

.arrow-right {
  position: absolute;
  top: 50%;
  right: 0;
}

Html looks like this:

       <div class="row swiper-container">
          <div class="arrow-left">
            <i class="ion-chevron-left"></i>
          </div>
          <div class="col-md-12 swiper-wrapper">
            @foreach($videos as $video)
              <div class="swiper-slide video-card">
                <header class="card__thumb">
                  <a href="/player/{{ $player->id }}/video/{{ $video->id }}"><img src="{{ $video->getThumbnail() }}"/></a>
                </header>

                <div class="card__body">
                  <div class="card__category">

                  </div>
                  <small>
                    {{ $video->created_at->diffForHumans() }}
                  </small>
                  <span class="video-title">
                    <p>
                      @if($video->title != '')
                        {{ $video->title }}  <i class="ion-arrow-right-c"></i>
                      @else
                        Untitled
                      @endif
                    </p>
                  </span>
                </div>
              </div>
            @endforeach
          </div>
          <div class="arrow-right">
            <i class="ion-chevron-right"></i>
          </div>
        </div>

And this is the script:

var carousel = function carousel() {
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    nextButton: '.arrow-left',
    prevButton: '.arrow-right',
    slidesPerView: 4,
    simulateTouch: false,
    spaceBetween: 15,
    breakpoints: {
        1181: {
            slidesPerView: 4
        },
        1180: {
            slidesPerView: 3
        },
        1020: {
            slidesPerView: 2
        },
        700: {
            slidesPerView: 1
        }
    }
  });
};

$(document).ready(function () {
  carousel();
});

Answer 1

I just did this for one of my current projects. You just have to change the location of the navigation HTML buttons and put them outside the swiper-container. For a better approach and behavior from the library, add a new class to them, and change the element in the JavaScript call.

Example:

<div class="swiper-container">  <div class="swiper-slides"></div> </div> <div class="swiper-button-prev-unique"></div> <div class="swiper-button-next-unique"></div>  let carousel = new Swiper('.swiper-container', {   navigation: {     nextEl: '.swiper-button-next-unique',     prevEl: '.swiper-button-prev-unique'   } }); 

That worked perfect, and you can put your arrows outside the wrapper with ease with CSS.

Answer 2

If you using multiple swipers then you need to add different class names to swiper-cotainer and pagination arrows. And then create new Swiper and bind each arrows to local swiper.

let arr_next = $('.template-next') //your arrows class name let arr_prev = $('.template-prev') //your arrows class name      $('.swiper-container--template').each(function (index, element) {                          $(this).addClass('swiper' + index);             arr_next[index].classList.add('template-next' + index);             arr_prev[index].classList.add('template-prev' + index);              new Swiper('.swiper' + index, {                 slidesPerView: 2,                 navigation: {                     nextEl: '.template-next'+index,                     prevEl: '.template-prev'+index                 },                 slidesPerView: 2,                 //spaceBetween: 100,                 loop: true,                 breakpoints: {                     961: { slidesPerView: 2 },                     740: { slidesPerView: 1 },                 },             });         }); `

Answer 3

var swiper = new Swiper('.swiper-container', {
		    nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 3,
        spaceBetween: 10,
        autoplay: 3500,
        autoplayDisableOnInteraction: false,
		loop: true,
        breakpoints: {
            1024: {
                slidesPerView: 3,
                spaceBetween: 40
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 30
            },
            640: {
                slidesPerView: 2,
                spaceBetween: 20
            },
            320: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        }
    });

.container{max-width: 600px;margin: 0 auto;}
.swiper_wrap{padding:0px 50px;height:100%;width: 100%;position: relative;display: block;text-align: left;}
.swiper-button-next{
margin-top: 0px;
position: absolute;
top: 50%;
right: -40px;
width: 45px;
height: 45px;
transform: translateY(-50%);
}
.swiper-button-prev{
  position: absolute;
  top: 50%;
  left: -40px;
  width: 45px;
  height: 45px;
  transform: translateY(-50%);
  margin-top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet"/>
		<div class="container">

<div class="swiper_wrap">
<div class="slider-wrapper">
       <div class="swiper-button-prev"></div>
        <div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href="#">
          <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
					</a>
				</div>
        <div class="swiper-slide">
					<a href="#">
          <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
					</a>
				</div>
        <div class="swiper-slide">
					<a href="#">
          <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
					</a>
				</div>
        <div class="swiper-slide">
					<a href="#">
          <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
					</a>
				</div><div class="swiper-slide">
					<a href="#">
          <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
					</a>
				</div>
			</div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        </div>
       <div class="swiper-button-next"></div>
</div>   
</div>
</div>
<script src="http://www.jakse.si/test/jakse/taxi/js/swiper.min.js"></script>

This works for me, it is the same like older answer, but maybe it looks better :)