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();
});

Bruckner

well the js is breaking it for me for a demo, but basically what you want to do is use position: absolute and then use right: (however many pixels you want) and left: ( however many pixels you want ) – Maigre

yes, I did that but that is not working since the arrows are not positioned like they should be then – Bruckner

without a swiper slider online file, i cant replicate this – Maigre

where are the arrows positioned right now? – Maigre

the left one is positioned correctly but the right one I can't see – Bruckner

if you cant see its because the width is too long, you need to shrink the container so that you will be able to see the arrow. If the container is 100% then anything past that you will not see – Maigre

so keep the body at 100%, container at like 85% with margin: auto, then you should be able to put the arrows outside the container but inside the full body width. You can use a negative pixel to push it out to where you want – Maigre

Yes, then it works, but I would like the container to be 100% width of 12 columns, so that it aligns with other content on the page, and when I have arrows and 12 column container in the same row, I can't navigate. How can I fix that? – Bruckner

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.

Prelect

This works fine as long as long as you have only 1 carousel on your page. – Drivein

@Drivein not. You can setup more sliders and give them unique classes for different arrows for each slider. Is not hard to test that. – Prelect

This no longer seems to work in at least Swiper 10.2.0. – Burks

Answer 2

For all my React folks out there:

import { Swiper as SwiperClass } from 'swiper/types';
import { Swiper, SwiperSlide } from 'swiper/react';

 export const MySwiper = () => {
   const [swiperRef, setSwiperRef] = useState<SwiperClass>();
   
   const theSlides = useMemo(()=> ['slide one', 'slide two'], [])

   const handlePrevious = useCallback(() => {
     swiperRef?.slidePrev();
   }, [swiperRef]);

   const handleNext = useCallback(() => {
     swiperRef?.slideNext();
   }, [swiperRef]);

   return (
     <div>
       <div>
         <button onClick={handlePrevious }>
             previous
         </button>
       </div>
       <Swiper
         onSwiper={setSwiperRef}
       >
         {theSlides.map((slide) => (<SwiperSlide key={slide}>{slide}</SwiperSlide>)
       </Swiper>
       <div>
         <button onClick={handleNext}>
           Next
         </button>
       </div>
     </div>
   );
 };

Tala

What is <SwiperClass>? – Serajevo

I apologize, I forgot to add the imports. SwiperClass is the alias I used for the TypeScript type that Swiper provides for an instance of Swiper. – Tala

This makes sense to me but I can't make it work. I want to use custom slider control buttons on top of the Swiper carrousel using React but it only works when I put my own SliderControl component inside the Swiper component. The other issue with having to put the slider controls inside Swiper is that I can't style the buttons to be at the top of the carousel, when I try positioning absolute it disappears from the view. Any ideas how to make that work? @PaulHendrickson? Thanks! – Foreground

So the swiperRef object is an instance of the controls of for that Swiper Slide so that object can be referenced anywhere and you should be able to do swiperRef?.slideNext() or swiperRef?.slidePrev() like I did in the handleNext and handlePrevious functions. – Tala

Worked perfectly for me. Thank you. Been hammering at this for hours... – Cricoid

I have to put all my divs inside Swiper into above array? – Elea

@IMRANH no, you can render whatever you want inside of Swiper however you want. The important part is getting reference to the swiper reference. – Tala

Answer 3

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 },
                },
            });
        });
`

Anthropography

A tip: you don't have to create made up unique classes if you're already creating the custom arrows as HTML Elements - just send the reference in (it supports both selector or HTML element object) - this can even be done with jquery if you call .get(0) on e.g. the arr_next in the example – Rustie

Thanks, this helped me allot! Works on latest version 10.3.1 – Sidle

Answer 4

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 :)

Outsole

Answer 5

This is the snippet for Swiper 11.
swiper CSS class has position:relative and overflow:hidden, and swiper-button-prev,swiper-button-next have position:absolute so we need to add additional container with position:relative and overwrite the position property of swiper to static in order to move the buttons outside of it.

<link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
<style>
:root{
  --swiper-navigation-sides-offset:-4rem; /* offset for navigation */
}
.container{
  max-width:300px;
  margin-inline: auto;
  padding: 1rem;
}
.swiper-container{
  position:relative;
}
.swiper{
  position:static;
  border: 1px solid black; /* decoration */
}
</style>
<div class="container">
  <div class="swiper-container">
    <!-- Slider main container -->
    <div class="swiper">
      <!-- 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>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</div>
<script>
window.addEventListener('load', () => {
  const swiper = new Swiper('.swiper', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
})
</script>

He

Answer 6

Put this below swiper block:

.section { 
  .swiper-button-prev {
    left: -20px;
  }
  .swiper-button-next {
    right: -20px;
  }
}

<div class="section">

  <div class="swiper">
    <ul class="swiper-wrapper">
      <li class="swiper-slide">
      </li> 
    </ul>
  </div>
  
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div> 
    
</div>

Plowshare

Answer 7

if anyone is interested I've found an easy work-around for this issue
position: fixed; will override the overflow:hidden; of the parent but it will make it appear relative to the root element, adding transform to the wrapper will make it relative again to the parent.

new Swiper(".my-swiper", {
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  }
});

.custom-swiper-wrapper {
  transform: translate(0, 0);
  .swiper-custom-nav {
    position: fixed;
  }
}

<div class="container custom-swiper-wrapper">
  <div class="swiper my-swiper">
    <div class="swiper-wrapper">
      swiper items here
    </div>
    <div class="swiper-button-next swiper-custom-nav"></div>
    <div class="swiper-button-prev swiper-custom-nav"></div>
  </div>
</div>

Lettyletup

This will not work in Safari I'm afraid. – Granddad

Answer 8

This is a general solution. To move your arrows outside the container you'll need to first remove the arrow divs from .swiper-container.

Make another bigger container that has .swiper-container and your moved arrows. Give this bigger container position: relative as a reference to arrows that have position: absolute.

Make sure that the .swiper-container width is changed to a value smaller than 100% (e.g. 90% 95%) to avoid overlapping with the arrows.

If you like to keep the .swiper-container width same as that of the entire page width then give -ve margin to the bigger container.

Iceblink

Answer 9

This works if slidesPerView = 1:

.swiper-container {
    padding-left: 50px;
    padding-right: 50px;
}

.swiper-slide {
    visibility: hidden;
}

.swiper-slide.swiper-slide-active {
    visibility: visible;
}

Preengage

Answer 10

In the wrapper function "carousel" we are using to initialize our Swiper instance we can use Swiper's native methods slideNext and slidePrev to add event listeners explicitly to ONLY children of a shared parent element.

            1020: {
                slidesPerView: 2
            },
            700: {
                slidesPerView: 1
            }
        }
    });
    mySwiper.el.parentElement.querySelector(".arrow-left").addEventListener('click',
        () => mySwiper.slideNext());
    mySwiper.el.parentElement.querySelector(".arrow-right").addEventListener('click',
        () => mySwiper.slidePrev());
};

For this to work fully, .swiper-container, .arrow-right and .arrow-left will need to share a wrapper. In Leff's case ".swiper-container" should work just fine:

<div class="row swiper-container">
    <div class="arrow-left">

Because this approach allows us to isolate selected elements to a shared parent container, this can be safely used as part of a block of code that might appear more than once.

Rickets

Answer 11

For React:

Add custom buttons wherever you want:

 <i className="my-swiper-button-next">Prev</i>
 <i className="my-swiper-button-prev">Next</i>

In the swiper props:

<Swiper
    navigation={{
      nextEl: '.my-swiper-button-next',
      prevEl: '.my-swiper-button-prev',
    }}
 >

</Swiper>

That's it :)

Linetta

Answer 12

Solution for Vue/Nuxt.

You can position and style those buttons anyway you want.

<template>
    <div class="carousel">
        <Swiper
            :modules="[Navigation, Pagination]"
            :navigation="{
                nextEl: '.my-button-next',
                prevEl: '.my-button-prev',
            }"
            :pagination="{
                el: '.swiper-pagination',
                clickable: true,
            }"
        >
            <SwiperSlide
                v-for="item in [1, 2, 3]"
                :key="item.toString()"
            >
                Slide {{ item }}
            </SwiperSlide>
        </Swiper>
        <div class="carousel__controls">
            <button class="my-button-prev">-</button>
            <div class="swiper-pagination" />
            <button class="my-button-next">+</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination } from 'swiper/modules';

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';
</script>

<style scoped lang="scss">
.carousel {
    &__controls {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        margin-top: 40px;
    }
}

.my-button-prev,
.my-button-next {
    margin: 0 15px;
    height: 36px;
    width: 44px;
    background: red;
}

.swiper-pagination {
    width: unset;
    position: unset;
    display: flex;
}
</style>

Warden

Answer 13

This is the basic example of how to achieve it. You were close. I slightly modified the code to make it visible within the snippet.

$(document).ready(function () {

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
        }
    }
  });
};


  carousel();
});

.row.swiper-container {
  margin-top: 50px;
  position: relative;
  width: 70%;
  margin: 0 auto;
}
.arrow-left {
  position: absolute;
  background: gray;
  top: 50%;
  left: -40px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}
.arrow-right {
  position: absolute;
  background: gray;
  top: 50%;
  right: -40px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}

.swiper-wrapper {
  margin: 0 auto;
  height: 200px;
  background: #f00;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<div class="row swiper-container">
  <div class="arrow-left">
    <i class="ion-chevron-left"></i>
  </div>
  <div class="col-md-12 swiper-wrapper">
    <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>
                  </small>
        <span class="video-title">
                    <p>

                    </p>
                  </span>
      </div>
    </div>
  </div>
  <div class="arrow-right">
    <i class="ion-chevron-right"></i>
  </div>
</div>

Immersionism

That works, but I would like the container to be 100% width of 12 columns, so that it aligns with other content on the page, and arrows outside of the container. How can I do that? – Bruckner

Just set it to 100 – Immersionism

I am not sure why, but I can't see arrows then. – Bruckner

Is it live somewhere I can debug? – Immersionism

Could be because .swiper-container has overflow: hidden? – Stardom

Answer 14

Ok, I had another method, What the guys suggesting will not work with multiple sliders on page. So, I added another two arrows, which will trigger the real arrows.

the swiper had: { navigation: { nextEl: '.xnext', prevEl: '.xprev', } }

$('.swiper-button-next').click(
      function(e){
            $(this).parents('.swiper-container').find('.xnext').trigger('click');
 });

 $('.swiper-button-prev').click(function(e){$(this).parents('.swiper-container').find('.xprev').trigger('click');});

Rip

Answer 15

The code below help to use more than one swiper, using one class. (At first I was used this in a php loop of swipers)

const swiperContainers = document.querySelectorAll('#swiper-global-container');
  const swipers = document.querySelectorAll('#swiper-global-container .swiper');

  swipers.forEach((swiper, index) => {
    swiper.classList.add(`swiper-${index}`);
  })

  swiperContainers.forEach((container, index) => {
    container.querySelector('.swiper-button-next').classList.add(`swiper-next-${index}`)
    container.querySelector('.swiper-button-prev').classList.add(`swiper-prev-${index}`)
  })

  swipers.forEach((swiper, index) => {
    new Swiper(`.swiper-${index}`, {
      navigation: {
        nextEl: `.swiper-next-${index}`,
        prevEl: `.swiper-prev-${index}`,
      },
    });
  });

html,
  body {
    margin: 0;
    padding: 0;
  }

  main {
    display: flex;
    flex-direction: column;
    min-width: 1300px;
  }

  #swiper-global-container {
    flex: 1;
    position: relative;
    max-width: 1250px;
    margin: 0 auto;
  }

  .swiper-slide {
    max-height: 50vh;
  }

  .swiper {
    max-width: 1200px;
    margin: 0 auto;
  }

  .swiper-button-prev {
    left: -50px !important;
  }

  .swiper-button-next {
    right: -50px !important;
  }

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<main>

  <div id="swiper-global-container">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
            src="https://images.unsplash.com/photo-1652961735386-883c83e4d464?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670"
            alt="">
        </div>
        <div class="swiper-slide">
          <img
            src="https://images.unsplash.com/photo-1572035563691-0944e6a816d5?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670"
            alt="">
        </div>
        <div class="swiper-slide">
          <img
            src="https://images.unsplash.com/photo-1652697911040-52d0453522a6?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574"
            alt="">
        </div>
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <div id="swiper-global-container">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
            src="https://images.unsplash.com/photo-1652721684678-a147a957a03e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2748"
            alt="">
        </div>
        <div class="swiper-slide">
          <img
            src="https://images.unsplash.com/photo-1652898756182-04023f4135a1?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2664"
            alt="">
        </div>
        <div class="swiper-slide">
          <img
            src="https://images.unsplash.com/photo-1652162539309-c96b2694f02b?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1655"
            alt="">
        </div>
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

</main>

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

Benedix

Answer 16

I'm using react so I didn't want to go through the trouble of creating new event handlers for each of the toggles. I came up with a solution where you just add an extra div wrapper to the slide content and add padding:

html

<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">
        <div class="video-card-inner">
          <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>
      </div>
    @endforeach
  </div>
  <div class="arrow-right">
    <i class="ion-chevron-right"></i>
  </div>
</div>

css

.arrow-left {
  left: 0; 
}
.arrow-right {
  right: 0;
}
.video-card {
  padding: 0rem 2rem;
}

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 arrows to sit outside of your visible content. You can still achieve this with custom toggles, but it will also work with their default toggles.

Aarau

Answer 17

With Bootstrap 5.1 you can do the following:

<div class="d-flex flex-row justify-content-center align-items-center">
   <i class="fa fa-angle-left order-1 px-3"></i> <!--icon left -->
   <i class="fa fa-angle-right order-3 px-3"></i> <!--icon right -->
   <div class="swiper myswiper order-2"> <!--swiper container with the slides in the middle -->
      <div class="swiper-wrapper">
         <div class="swiper-slide item card">
            Slide 1
         </div>
         <div class="swiper-slide item card">
            Slide 1
         </div>
      </div>
   </div>
</div>

You need the flex order feature (order-1, order-2, order-3 classes) in order to get the icons assigned correctly by the swiper js. Ate least without it it won't worked for me.

Don't forget to have the navigation assigned to the icons when you initialize swiper with the js:

   navigation: {
    nextEl: ".fa-angle-right",
    prevEl: ".fa-angle-left"
  },

Heimlich

Answer 18

I manged to solve this in a quite simple way. I added an extra swiper container (.swiper-container) outside the default swiper container (.swiper) with some specific css.

This is the CSS code for my 2 containers

.swiper-container 
{
max-width: 1400px;
position: relative;
margin: auto;
}
.swiper
{
max-width: 1200px;
}

This is my code from my app.js

 import Swiper from 'swiper';
  import { Navigation, Pagination } from 'swiper/modules';
  // import Swiper and modules styles
import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  // init Swiper:
  const swiper = new Swiper('.swiper', {
// configure Swiper to use modules
modules: [Navigation, Pagination],
slidesPerView: 3,
spaceBetween: 15,
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
},
pagination: {
  el: '.swiper-pagination',
clickable: true,
}
  });

And finally, this is my HTMLcode:

<section id="recent-reviews">
<h2>Latest Reviews</h2> 
<div class="swiper-container"> 

<div class="swiper reviewSwiper"> 
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Sample text</p>
</div>
<div class="swiper-slide">
<p>Sample text</p>
</div> <div class="swiper-slide">
<p>Sample text</p>
</div>
<div class="swiper-slide">
<p>Sample text</p>
</div>
<div class="swiper-slide">
<p>Sample text</p>
</div>
</div>
</div>
<!-- Navigation buttons -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</section>

Trixy

Answer 19

Just stumbled upon this issue today, here's my attempt at solving it. Basically it only requires you wrapping .swiper-container inside additional .swiper-container-wrapper, as Swiper allows passing references to HTMLElement instead of selector string. And you also get to keep the class names, no discrete classes required for navigation elements or container. At this point both navigation elements are placed inside .swiper-container-wrapper, as .swiper-container's siblings.

    $('.swiper-container-wrapper').each(function (index, element) {
        var swiperContainer = $(element).children('.swiper-container').get(0);
        var nextEl          = $(element).children('.swiper-button-next').get(0);
        var prevEl          = $(element).children('.swiper-button-prev').get(0);

        new Swiper(swiperContainer, {
            navigation: {
                nextEl: nextEl,
                prevEl: prevEl,
            },
        });
    });

Entomology