diff --git a/client/src/App.test.js b/client/src/App.test.js index 1f03afe..234febf 100644 --- a/client/src/App.test.js +++ b/client/src/App.test.js @@ -6,3 +6,32 @@ test('renders learn react link', () => { const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); }); +const carouselItems = document.querySelectorAll('.carousel-item'); +let currentIndex = 0; + +function showSlide(index) { + // Hide all carousel items + carouselItems.forEach(item => { + item.style.display = 'none'; + }); + + // Show the slide at the specified index + carouselItems[index].style.display = 'block'; +} + +function nextSlide() { + currentIndex = (currentIndex + 1) % carouselItems.length; + showSlide(currentIndex); +} + +function previousSlide() { + currentIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length; + showSlide(currentIndex); +} + +// Show the first slide initially +showSlide(currentIndex); + +// Set up event listeners for next and previous buttons +document.getElementById('nextBtn').addEventListener('click', nextSlide); +document.getElementById('prevBtn').addEventListener('click', previousSlide); \ No newline at end of file diff --git a/client/src/Carouselhtml.html b/client/src/Carouselhtml.html new file mode 100644 index 0000000..3eaaec3 --- /dev/null +++ b/client/src/Carouselhtml.html @@ -0,0 +1,51 @@ + + + + + + +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +

+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +

+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +

+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/client/src/index.css b/client/src/index.css index 17df0e7..859b2e0 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -15,3 +15,48 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } +.carousel-container { + width: 100%; + height: 300px; /* Adjust height as needed */ + overflow: hidden; + position: relative; +} + +.carousel-item { + width: 100%; + height: 100%; + display: none; +} + +.carousel-item img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.button { + margin-top: 3px; + display: inline-block; + padding: 10px 15px; + font-size: 16px; + cursor: pointer; + text-align: center; + text-decoration: black; + outline: none; + color: black; + border: none; + border-radius: 15px; + box-shadow: 0 9px #999; + transition-duration: 0.4s; +} + +.button:hover { + color: white; + background-color: #3e8e41; + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);} + +.button:active { + background-color: #3e8e41; + box-shadow: 0 5px #666; + transform: translateY(4px); +}