Default

  • slider-image
  • slider-image
  • slider-image
// Basic

var splide = new Splide( '.splide' );
splide.mount();

Multiple Slides

  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
var splideMultiple = new Splide( '.splide-multiple', {
perPage: 3,
rewind : true,
} );

splideMultiple.mount();

Pagination

  • slider-image
  • slider-image
  • slider-image
var splidePagiantion = new Splide( '.splide-pagination' );

splidePagiantion.on( 'pagination:mounted', function( data ) {
// data.items contains all dot items
data.items.forEach( function( item ) {
item.button.textContent = String( item.page + 1 );
item.li.parentNode.classList.add('numberic-pagination')
} );
} );

splidePagiantion.mount();

Thumbnails

  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
  • slider-image
var main = new Splide( '.splide-mainThubnail', {
type       : 'fade',
heightRatio: 0.5,
pagination : false,
arrows     : false,
cover      : true,
//   fixedWidth: 656,
fixedHeight: 556,
} );

var thumbnails = new Splide( '#thumbnail-slider', {
rewind          : true,
fixedWidth      : 104,
fixedHeight     : 58,
isNavigation    : true,
gap             : 10,
focus           : 'center',
pagination      : false,
cover           : true,
dragMinThreshold: {
mouse: 4,
touch: 10,
},
breakpoints : {
640: {
fixedWidth  : 66,
fixedHeight : 38,
},
},
} );

main.sync( thumbnails );
main.mount();
thumbnails.mount();