this is my HTML and css and I have an error where my slides do not show up, in the slideshow-container. no images are showing and I am sure I got the right directory:
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&display=swap">
      <link rel="stylesheet" href="style/style.css" />
      <title>Camping Equipment - Retail Camping Company</title>
   </head>
   <body>
      <header>
         <div class="sticky-nav">
            <div class="nav-container">
               <img src="assets/images/logo.svg" alt="Logo" class="logo">
               <h1>Retail Camping Company</h1>
               <div class="search-container">
                  <form action="/search" method="get">
                     <img src="assets/images/search.png" alt="search-icon" class="search-icon">
                     <input type="text" name="search" />
                     <button type="submit">Search</button>
                  </form>
               </div>
               <nav>
                  <ul>
                     <li><a href="index.html">Home</a></li>
                     <li><a href="camping-equipment.html">Camping Equipment</a></li>
                     <li><a href="furniture.html">Furniture</a></li>
                     <li><a href="reviews.html">Reviews</a></li>
                     <li><a href="basket.html">Basket</a></li>
                     <li><a href="offers-and-packages.html">Offers and Packages</a></li>
                  </ul>
               </nav>
            </div>
         </div>
      </header>
      
      <main>
         <section class="slideshow-section">
            
            <div class="slideshow-container">
               <div class="mySlides fade">
                  <img src="assets/images/homeslide.png" alt="Tents" style="width:100%">
               </div>
               <div class="mySlides fade">
                  <img src="https://via.placeholder.com/600x400" alt="Cookers" style="width:100%">
               </div>
               <div class="mySlides fade">
                  <img src="https://via.placeholder.com/600x400" alt="Camping Gear" style="width:100%">
               </div>
               <a class="prev" onclick="plusSlides(-1)">❮</a>
               <a class="next" onclick="plusSlides(1)">❯</a>
            </div>
            <div style="text-align:center">
               <span class="dot" onclick="currentSlide(1)"></span>
               <span class="dot" onclick="currentSlide(2)"></span>
               <span class="dot" onclick="currentSlide(3)"></span>
            </div>
         </section>
         <section class="about-section">
            <p>Welcome to Retail Camping Company, your one-stop-shop for all your camping equipment needs. Discover our premium offers on tents, cookers, camping gear, and furniture.</p>
         </section>
         <section class="featured-section">
            <h2>Featured Products</h2>
            <div class="featured-container">
               <div class="featured-product">
                  <img src="https://via.placeholder.com/150x150" alt="Featured Product">
                  <h3>Product Name</h3>
                  <p>Short product description.</p>
               </div>
               <div class="featured-product">
                  <img src="https://via.placeholder.com/150x150" alt="Featured Product">
                  <h3>Product Name</h3>
                  <p>Short product description.</p>
               </div>
               <div class="featured-product">
                  <img src="https://via.placeholder.com/150x150" alt="Featured Product">
                  <h3>Product Name</h3>
                  <p>Short product description.</p>
               </div>
            </div>
         </section>
         <section>
            
            <div class="special-offers-container">
               <div class="special-offer">
                  <img src="https://via.placeholder.com/200x200" alt="Tent Offer">
                  <p>20% off premium tents!</p>
               </div>
               <div class="special-offer">
                  <img src="https://via.placeholder.com/200x200" alt="Cooker Offer">
                  <p>Buy a cooker, get a free utensil set!</p>
               </div>
               <div class="special-offer">
                  <img src="https://via.placeholder.com/200x200" alt="Furniture Offer">
                  <p>Save on camping furniture bundles!</p>
               </div>
            </div>
         </section>
         <section class="buts">
           
            
            <button id="modalBtn">Special Offer!</button>
            <div id="modal" class="modal">
               <div class="modal-content">
                  <span class="close">×</span>
                  <p>Sign up now and receive 10% off your first purchase!</p>
               </div>
            </div>
         </section>
         <script>
            
            var modal = document.getElementById('modal'); 
            var modalBtn = document.getElementById('modalBtn');
            var closeBtn = document.getElementsByClassName('close')[0];
            modalBtn.addEventListener('click', openModal);
            closeBtn.addEventListener('click', closeModal); 
            window.addEventListener('click', outsideClick);
            

            function openModal() {
            modal.style.display = 'block';
            }
            
            function closeModal() {
            modal.style.display = 'none';
            }
            

            function outsideClick(e) {
            if (e.target == modal) {
            modal.style.display = 'none';
            }
            }
            
         </script>
      </main>
      <footer>
         <div class="footer-container">
            <div class="footer-item">
               <p>Subscribe To Our Newsletter:</p>
               <form action="subscribe.php" method="post">
                  <input type="email" name="email" placeholder="Enter your email" required>
                  <button type="submit">Subscribe</button>
               </form>
            </div>
            <div class="footer-item address-container">
               <p>        Get In Contact:</p>
               <p>Email: info@retailcampingcompany.com</p>
               <p>Phone: +35699382994</p>
               <p>Triq Malta,<br>Sliema 12345</p>
            </div>
            <div class="footer-item google-maps-container">
               <p>Where To Find Us:</p>
               <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12928.30174160605!2d14.5091557!3d35.8961681!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x130e452d3081f035%3A0x61f492f43cae68e4!2sCity%20Gate!5e0!3m2!1sen!2smt!4v1682559564194!5m2!1sen!2smt" width="650" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
            <div class="footer-item social-links-container">
               <p>Follow Us On:</p>
               <ul class="social-links">
                  <li><a href="https://www.facebook.com">Facebook</a></li>
                  <li><a href="https://www.instagram.com">Instagram</a></li>
                  <li><a href="https://www.twitter.com">Twitter</a></li>
               </ul>
            </div>
         </div>
      </footer>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script src="script.js"></script>
   </body>
</html>