splidejs/splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.

splide's Issues

Autoplay option for pause, not reset

Hello, I have autoplay with progress bar, but I want new property for pause (not reset) timer. So if I hover on slide, the progress bar will be stop on position (now it works like that), if I unhover, it will be continue to the end (from same position where stopped). I have interval 5000ms. Now it is not so user friendly, because user have to wait another 5s.

Thank you.

get instance from div

Hello, can I get instance splidejs from div? I mean like this
var splide = document.querySelector('.slider'); splide.data('splide').go('+');
Thank you

Destroy instance but keep slider layout

The problem is what I need to init slider on mobile devices (using breakpoints), for example. But when I set options destroy: true for desktop it remove all styles that I need. Is any way to save options like gap, perPage with destroy: true without add some css styles?

tabindex for slides

I have noticed that the JS add tabindex="0" to the current slide and -1 to the hidden slides. I think this breaks the accessibility as tabindex is needed only for user-actioned elements like buttons, links etc. So, when you navigate with a keyboard you get stucked on an empty selector which does not do anything and then go to the pagination items.

Let me know your thoughts on this.

autoplay and perMove doesn't seems to work together

Hi,

I'm currently running this configuration:

{
arrows: false
autoplay: true
drag: false
interval: 1000
pagination: false
pauseOnFocus: false
pauseOnHover: false
perMove: 1
perPage: 3
}

and everything seems to work fine except the perMove option, that does work without the autoplay, but when i set autoplay and the interval of it, it slide page per page and not slide per slide.

I don't know if this is the expected behaviour, in that case it could be useful to have the perMove option also with autoplay.

Thank you for your work and have a nice day.

Romeo

Refresh splide on window resize

When resize the window in desktop or rotate the phone from Portrait to Landscape or reverse the slide will shown items in the wrong position.
Some times all items gone away or some times they align to the left side and shown a large white space in the right side...
I think its good idea to refresh the slider (Or may fire the custom slide move) to reallocate items position.

Using cutom navigation buttons

Hello, I'm trying to use the buttons I have created above the Splide to function as the .splide__pagination buttons function. I have copied the classes and inline information across yet the buttons I have created don't seem to function.

What am I doing wrong, or is it even possible to do this?

My project: https://www.septagrama.com/staticsite/categories2.html

Thanks,
Billy

Use latest version of Splide in installation guide

In the website, installation guide hint for import JS and CSS from CDN was using old version of Splide, Please update to latest version or use a link which always use latest version.

Prevent click during swipe

Hey! First of all, thanks for the slider plugin.
Could you add the ability to prevent clicks when swiping slides. Often the slides themselves are links, and at the moment of swiping, the link is clicked.

Slider throw error when destroyed and the arrows options is false

To avoid the error you can disable arrows only when destroy is false:

new Splide('#splide-slider', {
  ...otherConfig,
  destroy: true,
  breakpoints: {
    639: {
      arrows: false,
      destroy: false,
    },
  },
}).mount();

But I think it should be fixed checking if Components.Arrows is null in this line:

splide/src/js/components/a11y/index.js

Line 75 in ac771b6

const arrows = Components.Arrows.arrows;

Easy Way to Position Arrows and Hide Pagination Circles?

Is there an easy way to hide the breakpoints?

By default, the arrows are placed on top of the left and right slides but your examples have the arrows completely to the side of the slider. Is there any easy way to reposition the arrows?

Splide not displaying

Hello, I have set splide up following the documentation here: https://splidejs.com/getting-started/

However, nothing seems to display, have I missed anything?

My project: https://www.septagrama.com/staticsite/categories2.html

Pagination classes

Hello, First i would like to say that this plugin is simply awesome. Perfect for my needs.

So i'm using TailWindCss and as you may know that offer you all this utility classes to style the site. I have done for the arrows buttons which i have found the in the docs but i can not find the classes to overwrite for the pagination.

This is my current code:

classes: {
        arrows      : 'splide__arrows',
        arrow       : 'splide__arrow w-10 h-10 opacity-75 bg-black bg-opacity-25 hover:bg-opacity-50 fill-current text-white transition-all duration-200 ease-out',
        prev        : 'splide__arrow--prev',
        next        : 'splide__arrow--next',
      },

Autoplay not working if the perPage attribute is not an integer

Hi

Before everything thank you for your work.
I'm having a weird behaviour when i'm setting the "perPage" attribute to "1.3" (i'd like to display a third of the next slide as preview).
when i'm using "autoplay" it seems that slide only at the first slide, and not on the next one.
I've tried to put just "1" as a value and it's working fine:

this is my configuration:

const config = {
perPage: 1.3,
autoplay: true,
interval: 3000,
type: 'loop',
pagination: false,
pauseOnHover: false,
pauseOnFocus: false,
}

I think that it can be caused by an out of limit, also it is not gaving me any error.

Thank you

Have a nice day

Romeo

Breakpoint issue

Hello and thank you for the the plugin, I really like it, it's easy to use and works great !

The only issue I have with it is that I can't make "perMove" work in the breakpoints options.

var options = { perPage: 3, perMove: 3, pagination: false, breakpoints: { 769: { perPage: 1, perMove: 1 } } };

The "perPage" works fine, but the perMove is ignored and my mobile version slides 3 by 3. Am I missing something ?

Use Grid and Video plugins together

Hi. Thanks for the awesome plugin.
I'm wondering if it possible to use Video and Grid plugins together?

I'm trying to use this setup, but the video doesn't work somehow:

          <div class="splide">
            <div class="splide__track">
              <ul class="splide__list">
                            <li class="splide__slide p-splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU"><span class="p-splide__slide__number">01</span></li>
                            <li class="splide__slide p-splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cYXI344Siew"><span class="p-splide__slide__number">02</span></li>
                            <li class="splide__slide p-splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=s5Ipq0jrvkQ"><span class="p-splide__slide__number">03</span></li>
                            <li class="splide__slide p-splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=z5rRZdiu1UE"><span class="p-splide__slide__number">04</span></li>
                            <li class="splide__slide p-splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=fPyh7pX-TiA"><span class="p-splide__slide__number">05</span></li>
                            <li class="splide__slide p-splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=F-pauGMkJQA"><span class="p-splide__slide__number">06</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">07</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">08</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">09</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">10</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">11</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">12</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">13</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">14</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">15</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">16</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">17</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">18</span></li>
                            <li class="splide__slide p-splide__slide"><span class="p-splide__slide__number">19</span></li>
              </ul>
            </div>
          </div>

JS

document.addEventListener('DOMContentLoaded', function () {

  console.log('SPLIDE')
  new Splide( '.splide', {
    type       : 'loop',
    height     : '14rem',
    perPage    : 2,
    perMove    : 1,
    grid       : {
      // You can define rows/cols instead of dimensions.
      dimensions: [ [ 1, 1 ], [ 2, 2 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ], [ 3, 2 ] ],
      gap: {
        row: '6px',
        col: '6px',
      },
    },
    breakpoints: {
      600: {
        height : '8rem',
        perPage: 1,
        grid   : {
          dimensions: [ [ 2, 2 ], [ 1, 1 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ] ],
        }
      }
    },
    
    video: {
      autoplay: false,
      mute    : true,
    },
  }, 


  ).mount( { Grid, Video } )


});

video not playing after loop

i got videos as slides (tried with the video extension and also coded my own), but after one loop the video is not visible until clicking into the window. then it works. but i use autoplay so it does not play after the loop

autoplay option not working in the latest version

I am playing with this nice piece of software to migrate from Owl Carousel. I set up a basic testing slider with 8 images using the latest version. As options I used only perPage and perMove for now. Everything works as expected.

According to the user manual autoplay option can be used to enable autoplay. So I decided to use it, here is my javascript code:

<script>
document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#image-slider', {
                perPage: 2,
                perMove: 2,
                autoplay: true,
	} ).mount();
} );
</script>

After reloading the page the slider becomes hidden. Is this a bug into the source code?

Attribute type=button for pagination buttons

Hi, I have a small request whether it is possible to add the type="button" attribute to the buttons inside the pagination. There is a situation when the slider is inside the form, but because the buttons do not have the attribute type "button" the buttons try to submit the form.

padding not working with wrapper or containers

here is a demo
https://codepen.io/Ahmed_Fathy/pen/QWjOyRZ

Stuck on Getting Started

I'm doing this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Splide test</title>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
    <script>
	  new Splide('.splide').mount();
  </script>
  </head>
  <body>
  <div class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
</div>
  </body>
</html>

I'm seeing this in Firefox's console:

Error: An invalid root element or selector was given. splide.min.js:6:4129
    L https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js:6
    t https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js:6
    e https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js:6
    <anonymous> https://example.test/dev/splide.php:9

What am I doing wrong?

Do not release swipe even out of container

Currently when start a swipe event in the Splide container, if you move your finger out of container the event will stop and slide will be released and does not change more
But in many cases in Android or iOS or other touch base devices you can know about touch move will work out of active container.
You can check this every where...
To do this enable you can listen to touch start of document and confirm this happen on specific Splide container and listen to event until touch end, and in this case touch out from container does not stop touch move.

Data attributes not being parsed

Getting a parsing issue whenever I try to use the data-attributes approach to pass in the options.

Using just the basic html markup from demo site.

<div class="splide" data-splide="{"type":"loop","perPage":3}">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
</div>

different slide intervals

is it possible to set different slide intervals per each slide?

Making a Slide Into a Link with Lazy Loading

Is there an easy way to make it so the when I click an image it goes to another page?

For example:

<li class="splide__slide">
  <a href="#">
    <img data-splide-lazy="...">
  </a>
</li>

Selector should support hierarchy selection

Looks like currently the direct selector was supported, instead should be support hierarchy of selector and apply the function to target item.
For example:
new Splide(".mydiv .splide-container .splide");
Cause wrong initialization, But this:
new Splide(".splide");
is okay.

Jsfiddle: https://jsfiddle.net/91ozfret/2/

Thumbnail casques page to jump in Safari

Setting up the thumbnail example. When clicking between thumbnails the window will jump quite aways. Testing in Chrome and it was fine.

A few questions

I love this script and I appreciate for your work. Please help me with an answer for these issues:

1. Could we set up the position for arrows and dots using Splide Options? For example I would like to position the arrows top-right above the container using numbers. This will help me not touching any CSS file.

2. Is it a way to hide Play/Stop buttons based on Splide Options but keep the loader visible?

TIP: As news Animate.css released a new version these days. For those who used Owl Carousel with Animate in the past they can use Animate with Splide too. It works without any issues but still testing.

PS: Check this issue Splidejs/splide-extension-video#1. I guess you did not see it.

Support for angular 9

How to implement functionality of splide.js carousel in angular 9?
pls help us with this issue

different slide intervals

is there a way to set different slide intervals?
I have a 10000ms slide interval and want to have one slide with 4 seconds.

if i code it with:

setTimeout(function(){
splide.go( '+1' );
$('.splide__slide video').get(0).currentTime = 0;
}, 4000);

then the next slide is only 6000ms long (should be 10 like the others)

Splide doesn't work

Hi!
i'm implementing splide to my project
I have a piece of code like this

When i run i get this error

My project use webpack for modules loader.
I have tried with cnd and all thing is ok
One more question is can i destroy or unmount current slide ?

Option 'drag': true does nothing if type: 'fade'

First of all I would like to say that splide is a really nice and modern slider. Thanks a lot for that!

I'm not sure if it is really a bug or intended, but it seems it's not possible to drag/swipe a slide if the type of the slider is 'fade'. I found no mention of this behaviour in the (otherwise awesome!) documentation.

Issue related to speed and rewindSpeed options

I am playing with this nice piece of software to migrate from Owl Carousel. I set up a basic testing slider with 8 images using the latest version. As options I used only perPage and perMove for now. Everything works as expected.

According to the user manual speed option can be used to set up transition speed and rewindSpeed option can be used to set up transition speed on rewind. So I decided to use both and separated and see what is happening, here is my javascript code:

<script>
document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#image-slider', {
                perPage: 2,
                perMove: 2,
                rewind: true,
                speed: 1000,
                rewindSpeed: 5000,
	} ).mount();
} );
</script>

After reloading the page and clicking on the right arrow I discovered the speed between slides is 5 seconds instead of 1 second. At the last rewind is correctly executed in 5 seconds.

I deleted the speed option and its value should be now the default one 400 milliseconds. No chance I got the same behavior 5 seconds speed.

Is this a bug into the source code?

hide arrows and pagination, if one slide

?

Show arrows only when needed

I have 6 images / slides which are all shown when the website is at full width. If the window is narrower the user can slide between the images, this is fine and working as expected. But I'd like to show the arrows only in the latter case. Is that possible?

Configurable swipe angle

Hey,

I really love your component based slider implementation and how easy it is to customize. But it would be great to be able to easily configure the used swipe angle (currently being hard coded to 30).

Thanks a lot!

PS: I‘m currently working on an infinite instagram like image carousel swiper (dynamic images, animated bullets,...) based on your library and will make it open source as soon as I‘m finished with it. As I could not find something related done with vanilla js

Slides are not visible when added in a loop

When adding a slide in a loop, slides are added, but they are not visible, because they are assigned a display: none
Here is my example:

$.each(data.content, function(i, item){
	html = `<div class="slide">${item.name}</div>`;  
	splide.add(html)
	splide.refresh();
})

Error in the website (?)

Hi! Thank you for sharing your beautiful code, I find an error in the splidejs.com website. Maybe.

Here:

var slider = splide( '#splide' );
should be:
var slider = splide;

Am I wrong?

Regards

Breakpoints with data Attribute

Hey.

Thanks for the great slider. I love using it and it's really inspiring.

Quick questions. I couldn't find the answer on documentation. Can we pass breakpoints as data attributes?

All other options work with data-splide but breakpoints don't work.

          {
            "lazyLoad": "nearby", 
            "rewind": "true",
            "arrows": true,
            "pagination": true,
            "height": "80vh",
            "cover": true,
            "breakpoints": {
              640: {
                "height": "60vh"
              }
            }
          }
    

Thanks

Add TypeScript typings

Would be cool if Splide has typing support. I'm developing mostly in TypeScript and this would enable Intellisense and write more fail-safe code.

Have a look at dayjs: https://github.com/iamkun/dayjs/tree/dev/types

Incorrect data attribute name for lazy loading

Hi!
lazyLoad option documentation has incorrect or old data attribute name. Instead data-splide-src should be data-splide-lazy.

updateOnMove trigger wrong slide

The option updateOnMove trigger the wrong slide. It trigger the last active slide instead of the new active slide.

See this sample: https://codepen.io/hendrik___/pen/KKdbePB

Autoplay not working if perPage is equal or more than number of slides

As the title says, autoplay isn't working if we have 3 slides, and set perPage 3 or higher.
JSFiddle example https://jsfiddle.net/hq5rk2y6/

Slider not working inside popup modal

Hello sir, I am using splide slider inside a popup modal called iziModal by marcelodolza. The slider is all there all the buttons and everything inside the popup modal but when i click the slides or the slide buttons the slider doesnt work. I am actually using a thumbnail gallery slider here. i just disabled the popup modal and the slider works just fine. Please help me with this issue sir.

Pagination event in combination with responsive destroy

I’m using the pagination:mounted event to insert text (the slide title) into each pagination item’s button element. I only apply the slider on small screens. I’m using the destroy option in breakpoints to make this happen.

When the slider is mounted on a small screen the slide title is inserted into each pagination item. When the slider is mounted on a large screen, and then I resize back to a small screen, the slide titles aren’t inserted anymore into the pagination items. Same goes when I start on a small screen, resize to a large screen, and then resize back to a small screen.

You can see what’s happening in:

• This screencast
  
• This codepen https://codepen.io/stefv/full/ExVJPqR

Do you have a suggestion how I can make this work?

splide.js in dist folder is the wrong file

In the dist folder of the release https://github.com/Splidejs/splide/releases/tag/v2.2.3, the splide.js file seems to be different than to the splide.min.js file.

I am using splide in a simple html page, and when I add the script splide.js I get the error "Splide is not a constructor". When I use splide.min.js I get the expected behaviour.

I'm not sure if this is intentional, but if it is it could do with an explanation.

windows edge: [SPLIDE] Unable to set property 'id' of undefined or null reference

hey, i get the above error only in edge on windows.
i changed the prettier config to none for trailingcommas, and made sure they are none when i'm initializing the slider.
any ideas on where i could look to fix?

thanks!
btw: awesome component you've built here!

Completely hiding the next image slide from viewport/slider box...

I have implemented the basic setup of splide, and the overall function is quite pleasing.. 👍 But as it seems to be the case with several carousel sliders (owl carousel as an example), the next slide image will briefly flash into the viewport when my browser window (Chrome) is resized rather quickly.

Any known solution to keep the next slide image from flashing into the viewport/slider box while the container resizes responsively?

Here's a screencast video url (loaded on Amazon's S3 storage) that demonstrates this issue:

https://cmr-og.s3-us-west-1.amazonaws.com/splide-demo.mp4

Cheers!

Allow custom properties in gap and padding

It would be cool if I could use CSS custom properties in gap and padding, so I can use our style guide and don't need to look for the value or update it later when our style guide changed.

Something like:

    new Splide(this.sliderEl.nativeElement, {
      // https://splidejs.com/options/
      type: 'slide',
      gap: 'var(--spacing-md)',
      arrows: false,
      pagination: false,
      autoWidth: true,
    }).mount({})

Pagination behavior inside breakpoints option

Hello!
Please tell us how the pagination option inside breakpoints works. For example, I would like to show pagination on one resolution and not on another. I created a codepen demo for an example that completely confused me 🤔. Pagination hides in one resolution and is no longer shown (behaves differently from what I expect from the settings)
This is possible? In the documentation there is a mention of such a possible