Created
October 9, 2024 09:47
-
-
Save thinkphp/c64fa2bc8bd1b256ac1f9b215b56abb9 to your computer and use it in GitHub Desktop.
simple-carousel-next-prev.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| body {font-family: Arial, Helvetica, sans-serif;} | |
| .gallery-container { | |
| position: relative; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .image-container { | |
| display: flex; | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| gap: 10px; | |
| } | |
| .img-thumbnail { | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| width: 100%; | |
| max-width: 300px; | |
| flex: 0 0 auto; | |
| } | |
| .img-thumbnail:hover { | |
| opacity: 0.7; | |
| } | |
| .nav-btn { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: rgba(0,0,0,0.5); | |
| color: white; | |
| border: none; | |
| padding: 10px; | |
| cursor: pointer; | |
| z-index: 1; | |
| } | |
| .prev { | |
| left: 0; | |
| } | |
| .next { | |
| right: 0; | |
| } | |
| /* The Modal (background) */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 2; | |
| padding-top: 100px; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: auto; | |
| background-color: rgba(0,0,0,0.9); | |
| } | |
| /* Modal Content (image) */ | |
| .modal-content { | |
| margin: auto; | |
| display: block; | |
| width: 80%; | |
| max-width: 700px; | |
| } | |
| /* Caption of Modal Image */ | |
| #caption { | |
| margin: auto; | |
| display: block; | |
| width: 80%; | |
| max-width: 700px; | |
| text-align: center; | |
| color: #ccc; | |
| padding: 10px 0; | |
| height: 150px; | |
| } | |
| /* Add Animation */ | |
| .modal-content, #caption { | |
| animation-name: zoom; | |
| animation-duration: 0.6s; | |
| } | |
| @keyframes zoom { | |
| from {transform: scale(0)} | |
| to {transform: scale(1)} | |
| } | |
| /* The Close Button */ | |
| .close { | |
| position: absolute; | |
| top: 15px; | |
| right: 35px; | |
| color: #f1f1f1; | |
| font-size: 40px; | |
| font-weight: bold; | |
| transition: 0.3s; | |
| } | |
| .close:hover, | |
| .close:focus { | |
| color: #bbb; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| /* 100% Image Width on Smaller Screens */ | |
| @media only screen and (max-width: 700px){ | |
| .modal-content { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>Image Gallery with Navigation</h2> | |
| <p>Click on any image to view it in a larger modal. Use the navigation buttons to scroll through images.</p> | |
| <div class="gallery-container"> | |
| <button class="nav-btn prev">❮</button> | |
| <button class="nav-btn next">❯</button> | |
| <div class="image-container"> | |
| <img class="img-thumbnail" src="images/1.jpg" alt="Image 1"> | |
| <img class="img-thumbnail" src="images/2.jpg" alt="Image 2"> | |
| <img class="img-thumbnail" src="images/3.jpg" alt="Image 3"> | |
| <img class="img-thumbnail" src="images/4.jpg" alt="Image 4"> | |
| <img class="img-thumbnail" src="images/5.jpg" alt="Image 5"> | |
| <img class="img-thumbnail" src="images/6.jpg" alt="Image 6"> | |
| <img class="img-thumbnail" src="images/1.jpg" alt="Image 7"> | |
| <img class="img-thumbnail" src="images/2.jpg" alt="Image 8"> | |
| <img class="img-thumbnail" src="images/3.jpg" alt="Image 9"> | |
| <img class="img-thumbnail" src="images/4.jpg" alt="Image 10"> | |
| div> | |
| </div> | |
| <!-- The Modal --> | |
| <div id="myModal" class="modal"> | |
| <span class="close">×</span> | |
| <img class="modal-content" id="img01"> | |
| <div id="caption"></div> | |
| </div> | |
| <script> | |
| // Get the modal elements | |
| const modal = document.getElementById("myModal"); | |
| const modalImg = document.getElementById("img01"); | |
| const captionText = document.getElementById("caption"); | |
| const imageContainer = document.querySelector('.image-container'); | |
| const prevBtn = document.querySelector('.prev'); | |
| const nextBtn = document.querySelector('.next'); | |
| // Get all images with class "img-thumbnail" and attach click event | |
| const images = document.getElementsByClassName("img-thumbnail"); | |
| for (let image of images) { | |
| image.onclick = function(){ | |
| modal.style.display = "block"; | |
| modalImg.src = this.src; | |
| captionText.innerHTML = this.alt; | |
| } | |
| } | |
| // Navigation buttons functionality | |
| prevBtn.addEventListener('click', () => { | |
| imageContainer.scrollBy({ | |
| left: -300, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| nextBtn.addEventListener('click', () => { | |
| imageContainer.scrollBy({ | |
| left: 300, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Get the <span> element that closes the modal | |
| const span = document.getElementsByClassName("close")[0]; | |
| // When the user clicks on <span> (x), close the modal | |
| span.onclick = function() { | |
| modal.style.display = "none"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment