Currently, I am in the process of developing an infinite horizontal tab slider using jQuery. My main objective is to optimize loading time by having the slider display only the first 10 slides upon initial page load. Subsequent slides will be loaded as the user navigates through them using the next page button.
The issue I am facing (available for reference on this demo) is that the slider currently loads one additional slide at a time and may cut off parts of the slides depending on the browser size. How can I address this problem effectively?
Below is the excerpt of JavaScript code that I have implemented:
var element = $('.tab-container li');
var slider = $('.tab-container');
var sliderWrapper = $('.wrapper');
var totalWidth = sliderWrapper.innerWidth();
var elementWidth = element.outerWidth();
var sliderWidth = 0;
var positionSlideX = slider.position().left;
var newPositionSlideX = 0;
sliderWrapper.append('<span class="prev-slide"><</span><span class="next-slide">></span>');
element.each(function() {
sliderWidth = sliderWidth + $(this).outerWidth() + 1;
});
slider.css({
'width': sliderWidth
});
$('.next-slide').click(function() {
if (newPositionSlideX > (totalWidth - sliderWidth)) {
newPositionSlideX = newPositionSlideX - elementWidth;
slider.css({
'left': newPositionSlideX
}, check());
};
});
$('.prev-slide').click(function() {
if (newPositionSlideX >= -sliderWidth) {
newPositionSlideX = newPositionSlideX + elementWidth;
slider.css({
'left': newPositionSlideX
}, check());
};
});
function check() {
if (sliderWidth >= totalWidth && newPositionSlideX > (totalWidth - sliderWidth)) {
$('.next-slide').css({
'right': 0
});
} else {
$('.next-slide').css({
'right': -$(this).width()
});
};
if (newPositionSlideX < 0) {
$('.prev-slide').css({
'left': 0
});
} else {
$('.prev-slide').css({
'left': -$(this).width()
});
};
};
$(window).resize(function() {
totalWidth = sliderWrapper.innerWidth();
check();
});
check();