diff --git a/dynamicProgrammingExamples/src/components/imageCarousel.js b/dynamicProgrammingExamples/src/components/imageCarousel.js index 4e0054f..86b84db 100644 --- a/dynamicProgrammingExamples/src/components/imageCarousel.js +++ b/dynamicProgrammingExamples/src/components/imageCarousel.js @@ -7,8 +7,8 @@ class Carousel { this.imagePointer = 0; // starting index this.careouselCards = []; - this.previousImage = this.previousImage.bind(this); - this.nextImage = this.nextImage.bind(this); + // this.previousImage = this.previousImage.bind(this); + // this.nextImage = this.nextImage.bind(this); // setup styling this.carouselPickerStyles(); @@ -49,16 +49,17 @@ class Carousel { // Make sure the first card renders this.showActiveSlide(); - this.container.append(this.carousel, this.RightButton, this.leftButton); + this.container.append(this.carousel, this.rightButton, this.leftButton); } showActiveSlide() { - console.log(this.imagePointer); this.careouselCards.forEach((e) => { if (Number(e.dataset.itemNo) === this.imagePointer) { e.style.display = 'block'; + e.firstChild.classList.add('active'); } else { e.style.display = 'none'; + e.firstChild.classList.remove('active'); } }); } @@ -83,22 +84,22 @@ class Carousel { this.leftButton.style.top = '50%'; this.leftButton.style.left = '2%'; - this.leftButton.addEventListener('click', this.previousImage); + this.leftButton.addEventListener('click', () => this.previousImage()); } carouselRightButton() { - this.RightButton = document.createElement('i'); - this.RightButton.classList.add( + this.rightButton = document.createElement('i'); + this.rightButton.classList.add( 'carousel-right-btn', 'fas', 'fa-angle-right', 'fa-10x', ); - this.RightButton.style.position = 'absolute'; - this.RightButton.style.top = '50%'; - this.RightButton.style.right = '2%'; + this.rightButton.style.position = 'absolute'; + this.rightButton.style.top = '50%'; + this.rightButton.style.right = '2%'; - this.RightButton.addEventListener('click', this.nextImage); + this.rightButton.addEventListener('click', () => this.nextImage()); } previousImage() { diff --git a/dynamicProgrammingExamples/src/components/mobileMenu.js b/dynamicProgrammingExamples/src/components/mobileMenu.js index 982b9d4..c0874f3 100644 --- a/dynamicProgrammingExamples/src/components/mobileMenu.js +++ b/dynamicProgrammingExamples/src/components/mobileMenu.js @@ -51,7 +51,6 @@ class Menu { burgerIconSetter() { const isSmallScreen = window.innerWidth <= 600; - console.log(window.screen.width); if (isSmallScreen) { this.adjustStylesForSmallScreen(); this.burgerIconClickListener(); @@ -62,7 +61,6 @@ class Menu { burgerIconClickListener() { this.burgerIcon.addEventListener('click', () => { - console.log(this.container.style.display); this.container.style.display = this.container.style.display === 'none' ? 'flex' : 'none'; return; diff --git a/dynamicProgrammingExamples/src/style.css b/dynamicProgrammingExamples/src/style.css index 5026668..2989214 100644 --- a/dynamicProgrammingExamples/src/style.css +++ b/dynamicProgrammingExamples/src/style.css @@ -13,9 +13,16 @@ a:hover { .carousel img { object-fit: contain; - } .active-slide { display: block; } + +.carousel-img { + transform: 200%; +} + +.carousel-img .active { + transition: transform 200ms ease-out; +}