I am initializing a slick with the below properties
$(slickTabContainer)
.not('.slick-initialized')
.slick({
dots: false,
arrows: true,
slidesToShow: 5,
slidesToScroll: 1,
infinite: false,
variableWidth: true,
responsive: [
{
breakpoint: 1280,
settings: {
slidesToShow: 4,
},
},
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
},
},
],
});
And on a particular event I need to load the slide which is not in view port without making inifinite property as true. How to achieve this.
My slickGoto functionality is as below
const checkTabSection = location.href.split("#")[1];
if (checkTabSection) {
dataTabDivs.forEach(div => {
div.classList.remove('active');
const tabIdList = div.getAttribute('data-tab').split(",");
tabIdList.forEach(tabId => {
const tabData = document.getElementById(tabId);
if (tabData) {
tabData.classList.add('tab-pane');
}
div.classList.add()
if (tabId == checkTabSection) {
if (tabData) {
tabData.classList.add('active');
}
div.classList.add('active');
if ($(slickTabContainer).hasClass('slick-initialized')) {
$(slickTabContainer).slick('slickGoTo', Number(div.getAttribute('data-slick-index')));
}
$('html,body').animate(
{
scrollTop: $(div).offset().top - 100,
},
1000,
);
}
})
})
}