Login With Github

Swiper API: Navigation

Navigation Parameters

Parameter Type Default Description
navigation object  

Object with navigation parameters. For example:

var mySwiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

 

{
nextEl string / HTMLElement null String with CSS selector or HTML element of the element that will work like "next" button after click on it
prevEl string / HTMLElement null String with CSS selector or HTML element of the element that will work like "prev" button after click on it
hideOnClick boolean false Toggle navigation buttons visibility after click on Slider's container
disabledClass string 'swiper-button-disabled' CSS class name added to navigation button when it becomes disabled
hiddenClass string 'swiper-button-hidden' CSS class name added to navigation button when it becomes hidden
}

Navigation Methods & Properties

Properties
mySwiper.navigation.nextEl HTMLElement of "next" navigation button
mySwiper.navigation.prevEl HTMLElement of "previous" navigation button
Methods
mySwiper.navigation.update(); Update navigation buttons state (enabled/disabled)

4 Comments

temp

Is there a parameter to prevent navigation arrow clicks from activating the main image and only have thumbnail clicking as the main image activator?

Hi!
Is it possible to initialize selecting Right Slide other than Left Slide or Centered Slide?

How does one use the hiddenClass. I am not understanding how this is implemented. Or I have done it wrong. 

Say I want to hide the navigation on min size (mobile etc). and at breakpoint 768 say I want to have them appear. How do I use this?

@samuelkobe If you want to display them according to width i'd use a media query, 
 

.arrowsClass {

  opacity: 0;

}


@media and screen (min-width: 768px) {

  .arrowsClass {

    opacity: 1

  }

}