' ); } checkResize(){ let windowWidth = window.innerWidth; if(windowWidth <= 768 && this.hasResized === false) { this.hasResized = true; this.transformItems(); console.log("resize"); }else if(windowWidth > 991 && this.hasResized === true){ this.hasResized = false; console.log("reset"); this.resetItmes(); } } resetItmes(){ let sel = document.querySelector( "#"+this.targetCarouselId + " .carousel-inner"); sel.innerHTML = this.origHtml; } transformItems(){ let sel = document.querySelector( "#"+this.targetCarouselId + " .carousel-inner"); sel.innerHTML = this.resizedHTML; } resize(){ var self = this; window.addEventListener('resize', function(event) { self.checkResize(); }, true); self.checkResize(); } } new mobileCarousel({ targetItemClass:"solutions-resources-item", //the target elem that will be converted into the carousel item appendedClass:"tile-carousel-resources", //adding a custom class to each carousel item targetCarouselId:"resources-carousel-desktop", //id of the class., wrapSelf:false, }); new mobileCarousel({ targetItemClass:"logo-holder", //the target elem that will be converted into the carousel item appendedClass:"logo-carousel-items", //adding a custom class to each carousel item targetCarouselId:"logo-carousel-desktop", //id of the class., wrapSelf:false, }); /* this code works if the carousel has the following structure carousel-inner > carousel-item if does not have this structure you might need to convert the above js code. */