How to update the number of item card along with screen width or responsive of screen in home page carousel using JavaScript

In home page Increasing and decreasing the number of items feed in different screen width using javaScript

setTimeout(() => {
						this.currentSlider = 1;
						const slider = $(".Homepage-container")[0];
						if (window.innerWidth > 992) {
							this.sliderWidth = slider.offsetWidth / 8;
							this.totalSliders = SC.CONFIGURATION.ProductSlider.sliderImg.length -7;
						} else if (window.innerWidth <= 992 && window.innerWidth > 768) {
							this.sliderWidth = slider.offsetWidth / 6;
							this.totalSliders = SC.CONFIGURATION.ProductSlider.sliderImg.length -5;
						} else if (window.innerWidth <= 768 && window.innerWidth > 480) {
							this.sliderWidth = slider.offsetWidth / 4;
							this.totalSliders = SC.CONFIGURATION.ProductSlider.sliderImg.length -3;
						}else if (window.innerWidth <= 480 && window.innerWidth > 300) {
							this.sliderWidth = slider.offsetWidth / 2;
							this.totalSliders = SC.CONFIGURATION.ProductSlider.sliderImg.length -1;
						}
						window.addEventListener("resize", function () {
							if (window.innerWidth > 992) {
								this.sliderWidth = slider.offsetWidth / 8;
								this.totalSliders = SC.CONFIGURATION.ProductSlider.sliderImg.length -7;
							} else if (window.innerWidth <= 992 && window.innerWidth > 768) {
								this.sliderWidth = slider.offsetWidth / 6;
								this.totalSliders = SC.CONFIGURATION.ProductSlider.sliderImg.length -5;
							} else if (window.innerWidth <= 768 && window.innerWidth > 480) {
								this.sliderWidth = slider.offsetWidth / 4;
								this.totalSliders = SC.CONFIGURATION.ProductSlider.sliderImg.length -3;
							}else if (window.innerWidth <= 480 && window.innerWidth > 300) {
								this.sliderWidth = slider.offsetWidth / 2;
								this.totalSliders = SC.CONFIGURATION.ProductSlider.sliderImg.length -1;
							}
							if (window.innerWidth > 480) {
								let scrollerwidth = $('.Homepage-container')[0].offsetWidth;
								$('.Homepage-feed').css('height', scrollerwidth * 0.233 + 10 + 'px'); 
							} else {
								$('.Homepage-feed').css('height', 'auto');
							}

Leave a comment

Your email address will not be published. Required fields are marked *