Default
// Basic var splide = new Splide( '.splide' ); splide.mount();
Multiple Slides
var splideMultiple = new Splide( '.splide-multiple', {
    perPage: 3,
    rewind : true,
} );
    
    splideMultiple.mount();
                                        Pagination
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
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();
                                        Copyright © 2022 DesignReset, All rights reserved.
Coded with
 
                                     
                                     
                                     
                             
                                                             
                                                            