Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
options.navigation = {
nextEl: `.next-${this.uniqueId}`,
prevEl: `.prev-${this.uniqueId}`,
};
}
if (opts.enableAutoplay) {
options.autoplay = {
delay: opts.delayAutoplay,
disableOnInteraction: opts.disableAutoplayOnInteraction,
};
}
// tslint:disable-next-line:no-unused-expression
new Swiper(`.container-${this.uniqueId}`, options);
}
}
$(sl.contentDom).prepend(getData(data))
// 处理完业务逻辑后必须要调用refreshComplete
sl.refreshComplete()
},
})
},
})
)
})
/**
* 这里要说明我虽然用的swiper插件来实现左右滑动的效果。但是你完全可以用其他的小一点的。
* 我用这个插件主要是很多人比较熟悉这个插件
*
*/
const mySwiper = new Swiper('.swiper-container', {
onSlideChangeStart: function(swiper) {
scrollloads.forEach((scrollload, index) => {
index === swiper.activeIndex ? scrollload.unLock() : scrollload.lock()
})
},
})
public handleSwiper() {
// tslint:disable-next-line:no-unused-expression
new Swiper('.swiper-container', {
direction: 'vertical',
loop: false,
speed: 1600,
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet(index: any, className: any) {
const year = document
.querySelectorAll('.swiper-slide')
[index].getAttribute('data-year');
return `<span class="${className}">${year}</span>`;
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
handleSwiper() {
const timelineSwiper = new Swiper('.swiper-container', {
direction: 'vertical',
loop: false,
speed: 1600,
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet(index, className) {
const year = document.querySelectorAll('.swiper-slide')[index].getAttribute('data-year');
return `<span class="${className}">${year}</span>`;
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
var content = (
<div>
<div>
{ children }
</div>
{ pagination }
{ btnNext }
{ btnPrev }
{ scrollBar }
</div>
);
container.innerHTML = ReactDomServer.renderToStaticMarkup(content);
return new Swiper(container.children[0], config);
},