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