You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xshop/resources/views/segments/index/CurvePosts/CurvePosts.js

53 lines
1.5 KiB
JavaScript

import {tns} from "tiny-slider/src/tiny-slider";
var curvePostSlider ;
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('#curve-slider-post')?.forEach(function (el) {
if (el.classList.contains('.tns-slider')){
console.log('ignore');
return 'ignore';
}
curvePostSlider = tns({
container: el,
responsive:{
560:{
items: 1.5,
},
1000:{
items: 3.5,
},
1400:{
items: 5.5,
},
},
// edgePadding: 50,
autoplay: true,
autoplayButton: false,
mouseDrag: true,
prevButton: false,
nextButton: false,
autoplayTimeout: 8000,
center: true,
nav: true,
loop:true,
});
});
//
document.querySelector('#crp-nxt')?.addEventListener('click',function () {
if (document.documentElement.getAttribute('dir') === 'rtl'){
curvePostSlider.goTo('prev');
}else{
curvePostSlider.goTo('next');
}
});
document.querySelector('#crp-prv')?.addEventListener('click',function () {
if (document.documentElement.getAttribute('dir') !== 'rtl'){
curvePostSlider.goTo('prev');
}else{
curvePostSlider.goTo('next');
}
});
});