日本語

Overflow

Enough/Not Enough Slides

In case that your carousel does not have enough slides, you may want to hide arrows/pagination and disable drag. From version 4.1.0, you can customize how your carousel should behave when there are not enough slides by the is-overflow status class or listening the overflow event.

For example, if you specify width of slides by fixedWidth (or autoWidth), your content may be narrower than the carousel. The following demo disables some functions of the carousel in such case, and enables them when the width of contents gets enough by resizing viewport. You can simulate it by moving the right edge:

https://splidejs.com
  • 01
  • 02

This feature is also useful for dynamic carousels. In the example below, navigations and drag will be enabled only when you provide enough items:

  • 01

is-overflow Class

If total width of slides is wide enough for the list element which is their parent, Splide assigns the is-overflow class to the root element. For instance, by using this and the :not() pseudo-class together, you can hide arrows when contents are not adequate:

.splide:not(.is-overflow) .splide__arrows {
  display: none;
}
CSS

Observing Overflow

Splide emits the overflow event when total width of slides gets wider or narrower than the list element. To do something at these timings, call the on() method before mount() and check the callback argument:

var splide = new Splide();


splide.on( 'overflow', function ( isOverflow ) {
  if ( isOverflow ) {
    // Enough slides
  } else {
    // Not enough slides
  }
} );


splide.mount();
JavaScript

By this event and options, you can toggle navigations and drag like so:

var splide = new Splide();


splide.on( 'overflow', function ( isOverflow ) {
  splide.options = {
    arrows    : isOverflow,
    pagination: isOverflow,
    drag      : isOverflow,
  };
} );


splide.mount();
JavaScript

You'll need 2 more steps for loop carousels because of clones.

  • Update the clones option to generate/destroy clones
  • Reset the carousel position by go() method
var splide = new Splide( { type: 'loop' } );


splide.on( 'overflow', function ( isOverflow ) {
  // Reset the carousel position
  splide.go( 0 );


  splide.options = {
    arrows    : isOverflow,
    pagination: isOverflow,
    drag      : isOverflow,
    clones    : isOverflow ? undefined : 0, // Toggle clones
  };
} );


splide.mount();
JavaScript

The result will be like the following example:

https://splidejs.com
  • 01
  • 02

Note that clones: undefined tells Splide that it should automatically determine the number of clones.

Centering Slides

When there are not enough slides, you may want to center them instead of left or right alignment like this following example:

https://splidejs.com
  • 01
  • 02

To achieve this, there are 2 approaches — CSS and script.

By CSS

The easiest approach is using CSS with the is-overflow status class described above.

  1. Add justify-content: center to the list element only when the root element does not have is-overflow. 
    .splide:not( .is-overflow ) .splide__list {
      justify-content: center;
    }
    CSS
  2. If you are using the gap option, eliminate margin of the last slide by overriding the inline style since it shifts slides from the center. 
    .splide:not( .is-overflow ) .splide__slide:last-child {
      margin: 0 !important;
    }
    CSS

By Script

Alternatively, you can get the same result with the CSS approach by using script. Some important points are:

  • Check Layout#isOverflow() on the resized event (not overflow) and toggle justifyContent = 'center' of the list element according to the result.
  • If you are using gap, remove margin of the last slide only when isOverflow() returns false.

Here is the example code:

var splide     = new Splide();
var Components = splide.Components;


splide.on( 'resized', function() {
  var isOverflow = Components.Layout.isOverflow();
  var list       = Components.Elements.list;
  var lastSlide  = Components.Slides.getAt( splide.length - 1 );


  if ( lastSlide ) {
    // Toggles `justify-content: center`
    list.style.justifyContent = isOverflow ? '' : 'center';


    // Remove the last margin
    if ( ! isOverflow ) {
      lastSlide.slide.style.marginRight = '';
    }
  }
} );


splide.mount();
JavaScript