40

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();
});
Leff
  • 1,968
  • 24
  • 97
  • 201
  • 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 ) – Keith Jan 25 '17 at 16:03
  • yes, I did that but that is not working since the arrows are not positioned like they should be then – Leff Jan 25 '17 at 16:04
  • without a swiper slider online file, i cant replicate this – Keith Jan 25 '17 at 16:05
  • where are the arrows positioned right now? – Keith Jan 25 '17 at 16:06
  • the left one is positioned correctly but the right one I can't see – Leff Jan 25 '17 at 16:09
  • 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 – Keith Jan 25 '17 at 16:11
  • 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 – Keith Jan 25 '17 at 16:12
  • 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? – Leff Jan 25 '17 at 22:33

15 Answers15

67

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.

Ezequiel Alba
  • 801
  • 6
  • 9
13

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>
   );
 };
PaulHendrickson
  • 190
  • 2
  • 7
  • What is ``? – Sabrina Tolmer Feb 03 '23 at 09:34
  • 1
    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. – PaulHendrickson Feb 06 '23 at 20:58
  • 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! – OmarAguinaga Feb 10 '23 at 22:33
  • 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. – PaulHendrickson Feb 21 '23 at 18:35
  • Worked perfectly for me. Thank you. Been hammering at this for hours... – Maria Ramono Jul 13 '23 at 17:12
4

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 },
                },
            });
        });
`
Marian Kosaniak
  • 151
  • 6
  • 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 – jave.web Aug 17 '23 at 22:43
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 :)

unforgiven
  • 145
  • 1
  • 2
  • 12
2

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>
ZygD
  • 22,092
  • 39
  • 79
  • 102
Lbdev
  • 21
  • 2
2

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>
Hosam Rehani
  • 490
  • 6
  • 10
1

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.

Adrian Enriquez
  • 8,175
  • 7
  • 45
  • 64
Jay Modh
  • 11
  • 1
1

This works if slidesPerView = 1:

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

.swiper-slide {
    visibility: hidden;
}

.swiper-slide.swiper-slide-active {
    visibility: visible;
}
aLx13
  • 701
  • 5
  • 16
1

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.

Bryce Leue
  • 11
  • 2
0

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>
Serg Chernata
  • 12,280
  • 6
  • 32
  • 50
0

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');});
Massalha Shady
  • 17
  • 3
0

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" />
Carolaine
  • 1
  • 1
0

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.

Edward
  • 1,399
  • 11
  • 23
0

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"
  },
oliverm
  • 1
-1

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,
            },
        });
    });
nesinervink
  • 333
  • 3
  • 13