Responsive “You may also like” slider on the PDP page

In the PDP page there is already a slider with “You may also like” title but its is not responsive in all the device in some screens some cords will overflow and show empty places at end of the slider, we can use below solution to correct the issues with bx-slider.

Modules: “ItemRelations.Related.View” (ItemRelationsRelatedView)

_.extend(ItemRelationsRelatedView.prototype, {
				//carouselInitialize function is used to update the recomended product slider properties.
        carouselInitialize: _.wrap(ItemRelationsRelatedView.prototype.carouselInitialize, function (fn) {
          try {
						const { siteSettings, imageSizeMapping } = this.options.application.getConfig();
						const carousel = this.$el.find('.item-relations-related-row .item-relations-row[data-type="carousel-items"]');
						if (carousel.length > 0) {
							if (Utils.isPhoneDevice() === false && (siteSettings.imagesizes || false) ) {
								const img_min_height = _.where(siteSettings.imagesizes || [], {
									name: imageSizeMapping.thumbnail || "",
								})[0].maxheight;
								carousel.find(".item-relations-related-item-thumbnail").css("minHeight", img_min_height);
							}
							let recomendedProducts = SC.CONFIGURATION.bxSliderDefaults;
							recomendedProducts.infiniteLoop = true;
							recomendedProducts.minSlides = 1;
							recomendedProducts.slideWidth = 228;
							if (this.productLength >= 5) {
								recomendedProducts.oneToOneTouch = window.innerWidth > 768 ? true : false;
							} else {
								recomendedProducts.oneToOneTouch = window.innerWidth > 768 ? false : true;
							}
							Utils.initBxSlider(carousel, recomendedProducts);
							$('.item-relations-related-row .bx-wrapper').css('max-width', '100%');
							this.onResize();
						}
					} catch (error) {
						console.error('Error @ the carouselInitialize function', error);
					}
				}),
				//onResize function is used to update the recomended product slider width for different devices
				onResize: function (){
					try {
						let sliderCard = $('.item-relations-cell').innerWidth();
						if (this.productLength > 0) {
							let slides = window.innerWidth <= 768 ? (window.innerWidth > 480 ? 2 : 1) : window.innerWidth > 768 && window.innerWidth <= 1200 ? 3 : window.innerWidth > 1200 && window.innerWidth < 1600 ? 4 : 5;
							if (this.productLength > slides || (this.productLength === 5 && slides === 5)) {
								$('.item-relations-related-row .bx-viewport').innerWidth(slides === 1 ? sliderCard : slides === 5 ? (sliderCard + 40) * 4 : sliderCard * slides);
								$('.item-relations-related-carousel-prev').show();
								$('.item-relations-related-carousel-next').show();
							} else {
								$('.item-relations-related-row .bx-viewport').innerWidth(slides === 5 ? (sliderCard + 40) * this.productLength :sliderCard * this.productLength);
								$('.item-relations-related-carousel-prev').hide();
								$('.item-relations-related-carousel-next').hide();
							}
						}
					} catch (error) {
						console.error('Error @ onResize function', error);
					}
				},
				getContext: _.wrap(ItemRelationsRelatedView.prototype.getContext, function (fn) {
					let originalRet = fn.apply(this, _.toArray(arguments).slice(1));
					let self = this;
					self.productLength = originalRet.collection.length;
					window.addEventListener('resize', () => {
						self.onResize();
					});
					return originalRet;
				})
      });