Hi. Thanks for the awesome plugin.
I'm wondering if it possible to use Video and Grid plugins together?
<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>
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 } )
});