Thiết kế website giá rẻ

Question

ive made a website with a mobile version, and a desktop version, which both work fine on their own but when i try to add the two together the image slideshow on te desktop version doesnt display the images but works for mobile. ive messed around with different css attributes but cant get anything to work. i’ve also checked that the file paths are right, which they are because the slideshow works on mobile screens (pixle-width of 600)but not desktop screens

my html of the website with both mobile and desktop (desktop displayed first)

  <body>
    <!-- header -->
    <div class="header w3-container w3-animate-top">
      <div class="w3-row">
        <div class="w3-col s2 m2 l2 w3-center">
          <div class="hidden-nav-menu">
            <button onclick="toggleNav()" class="w3-btn">
              <span class="material-symbols-outlined" id="hamburger-menu">
                menu
              </span>
            </button>
            <div id="mobile-nav" class="nav-menu">
              <a href="/Website Project/index.html" class="w3-btn">Home</a>
              <a href="/Website Project/deals/deals.html" class="w3-btn"
                >Deals</a
              >
            </div>
          </div>
        </div>
        <!-- logo stuff -->
        <div class="w3-col s8 m8 l8 w3-center">
          <a href="/Website Project/index.html"
            ><img
              src="/Website Project/logos/logo1.png"
              alt="Array Logo"
              class="logo"
          /></a>
        </div>
        <div class="w3-col s2 m2 l2">
          <br />
        </div>
      </div>
    </div>

    <!-- main content -->
    <div class="main w3-animate-top">
      <div class="w3-container">
        <br />
        <br />
        <br />

        <div class="w3-row">
          <!--tittle stuff-->
          <div class="w3-center">
            <div class="w3-col s12 m12 l12">
              <div class="w3-panel w3-round-xxlarge para">
                <h2>❮ iPhone X ❯</h2>
              </div>
            </div>
          </div>
        </div>

        <div class="w3-row cards">
          <div class="slide-desk w3-col s12 m6 l6">
            <div class="card">
              <div class="cardImgHolder w3-content w3-display-container">
                <img
                  src="iphone2.png"
                  alt="iPhone X"
                  class="cardImg mySlides"
                />
                <img
                  src="iphone.webp"
                  alt="iPhone X"
                  class="cardImg mySlides"
                />
                <img
                  src="iphone3.png"
                  alt="iPhone X"
                  class="cardImg mySlides"
                />

                <button
                  class="w3-button w3-black w3-display-left"
                  onclick="plusDivs(-1)"
                >
                  ❮
                </button>
                <button
                  class="w3-button w3-black w3-display-right"
                  onclick="plusDivs(1)"
                >
                  ❯
                </button>
              </div>
            </div>
          </div>

          <div class="desk">
            <!-- first product stuff-->
            <div class="products w3-col s12 m6 l6 w3-center">
              <!-- first product card stuff-->
              <div class="card w3-row">
                <div class="w3-col s12 m12 l12">
                  <div class="cardTxt w3-center">
                    <h2>Apple iPhone X</h2>
                    <br />
                    <p id="txt">
                      Introducing the iconic iPhone X by Apple, a masterpiece of
                      innovation and elegance now available at Array! Elevate
                      your mobile experience with this stunning device, boasting
                      a sleek design and cutting-edge technology that redefines
                      smartphone excellence. From its edge-to-edge Super Retina
                      display to its powerful A11 Bionic chip, every aspect of
                      the iPhone X is crafted to perfection. Capture life's
                      moments in stunning detail with the dual-camera system,
                      and unlock a new world of possibilities with Face ID, the
                      most secure facial authentication ever in a smartphone.
                      Don't miss your chance to own a piece of the future—shop
                      the iPhone X on sale at Array today and join the
                      revolution in mobile technology!
                    </p>
                    <h4 class="price">
                      <span class="red-line">$800.00</span>
                    </h4>
                    <h4 class="price">$649.98</h4>
                    <h6 class="credit">
                      An
                      <a href="https://www.apple.com/" class="link">Apple</a>
                      Product
                    </h6>
                  </div>
                </div>
              </div>

              <!-- second product card stuff-->
              <div class="card w3-row">
                <div class="w3-col s12 m12 l12">
                  <div class="w3-center cardTxt">
                    <h2>Purchase</h2>
                    <br />

                    <h4 class="price2">$649.98</h4>

                    <p id="method" class="methTxt">Payment Method:</p>

                    <select id="method">
                      <option>Visa</option>
                      <option>Master Card</option>
                      <option>JCB</option>
                      <option>Discover Card</option>
                    </select>
                    <br /><br />

                    <p id="inputs" class="methTxt">Card Number:</p>
                    <input type="text" id="inputs" />
                    <br /><br />

                    <p id="inputs" class="methTxt">Security code:</p>
                    <input type="text" id="inputs" />
                    <br /><br />

                    <p id="inputs" class="methTxt">Expiration date:</p>
                    <input type="month" id="inputs" />
                    <br /><br />

                    <p><button class="w3-button w3Button">Submit</button></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br />
        <br />
        <br />

        <!-- product stuff-->
        <div class="products mobile">
          <!-- text card stuff-->
          <div class="card w3-row">
            <div class="w3-col s12 m12 l12">
              <div class="cardTxt w3-center">
                <h2>Apple iPhone X</h2>
                <br />
                <p id="txt">
                  Introducing the iconic iPhone X by Apple, a masterpiece of
                  innovation and elegance now available at Array! Elevate your
                  mobile experience with this stunning device, boasting a sleek
                  design and cutting-edge technology that redefines smartphone
                  excellence. From its edge-to-edge Super Retina display to its
                  powerful A11 Bionic chip, every aspect of the iPhone X is
                  crafted to perfection. Capture life's moments in stunning
                  detail with the dual-camera system, and unlock a new world of
                  possibilities with Face ID, the most secure facial
                  authentication ever in a smartphone. Don't miss your chance to
                  own a piece of the future—shop the iPhone X on sale at Array
                  today and join the revolution in mobile technology!
                </p>
                <h3 class="price">
                  <span class="red-line">$800.00</span>
                </h3>
                <h3 class="price">$649.98</h3>
                <h6 class="credit">
                  An
                  <a href="https://www.apple.com/" class="link">Apple</a>
                  Product
                </h6>
              </div>
            </div>
          </div>

          <!-- input card stuff-->
          <div class="card w3-row">
            <div class="w3-col s12 m12 l12">
              <div class="w3-center cardTxt">
                <h2>Purchase</h2>
                <br />

                <h3 class="price2">$649.98</h3>

                <p id="method" class="methTxt">Payment Method:</p>

                <select id="method">
                  <option>Visa</option>
                  <option>Master Card</option>
                  <option>JCB</option>
                  <option>Discover Card</option>
                </select>
                <br /><br />

                <p id="inputs" class="methTxt">Card Number:</p>
                <input type="text" id="inputs" />
                <br /><br />

                <p id="inputs" class="methTxt">Security code:</p>
                <input type="text" id="inputs" />
                <br /><br />

                <p id="inputs" class="methTxt">Expiration date:</p>
                <input type="month" id="inputs" />
                <br /><br />

                <p><button class="w3-button w3Button">Submit</button></p>
              </div>
            </div>
          </div>

          <br />
          <br />
          <br />
        </div>
      </div>
    </div>

    <!-- footer stuff -->
    <div class="footer w3-container w3-animate-top">
      <div class="w3-row">
        <div class="w3-col s12 m2 l2 w3-center">
          <img
            src="/Website Project/logos/logo2.png"
            alt="Array Logo"
            class="logo2"
          />
        </div>
        <div id="contactDetails" class="w3-col s12 m10 l10">
          <h1>Contact Details</h1>
          <h5>
            Phone: <a href="tel:049494181">04 949 4181</a><br />
            Email: <a href="[email protected]"> [email protected]</a>
          </h5>
        </div>
      </div>
    </div>
    <script src="product.js"></script>
  </body>

my css

html {
  height: 100%;
  width: 100%;
}

/*header stuff*/
.header {
  background-color: #02240c;
}

.logo {
  max-width: 20em;
  width: 100%;
  max-height: 265px;
  margin-top: -40px;
  margin-bottom: -40px;
}

/*nav link stuff*/
.nav-link {
  border: 2px solid black;
  padding: 10px;
  margin: 0px 10px;
  width: 80px;
  text-align: center;
}

.hidden-nav-menu {
  margin-top: 72px;
}

.nav-link:hover {
  background-color: rgb(255, 255, 255);
  font-size: 24px;
  border: 3px solid white;
  background-color: #a5a5a5;
}

#mobile-nav {
  display: none;
}

.nav-menu a {
  display: block;
  padding: 12px 10px;
  text-decoration: none;
  color: #ffffff;
}

#hamburger-menu {
  color: rgb(255, 255, 255);
}

/*main body stuff*/
.main {
  width: 100%;
  margin: auto;
  background-color: #c1c1c1;
}

.main p {
  font-size: 15px;
  font-family: "Lexend Deca";
  font-weight: 300;
  font-style: normal;
  color: #000000;
}

.main h2 {
  font-size: 30px;
  font-family: "IBM Plex Mono";
  font-weight: 600;
  font-style: normal;
  color: #000000;
}

/* product stuff in general (still in main) */
.products {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: center;
}

.w3Button {
  background-image: linear-gradient(
    315deg,
    rgb(30, 89, 18, 1),
    rgba(2, 85, 28, 0.75)
  );
  position: relative;
  color: white;
  font-size: 20px;
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-style: normal;
}

.slide-desk {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  flex: 1;
}

.mySlides {
  display: none;
}

.desk-img {
  display: block;
}

.card {
  background-image: linear-gradient(
    315deg,
    rgb(30, 89, 18, 1),
    rgba(2, 85, 28, 0.75)
  );
  padding: 1em;
  border-radius: 20px;
  margin: 1.5em;
  flex: 1;
}

/*css to help the three cards scale properly and equally*/

.cards {
  display: flex;
  align-items: stretch;
}

.card p {
  color: white;
}

.card h2 {
  position: relative;
  color: white;
  font-size: 20px;
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-style: normal;
}

.cardImgHolder {
  position: relative;
  width: 100%;
  height: 100%;
}

.cardImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scale: 75%;
}

.price {
  display: inline-block;
  font-family: "Lexend Deca";
  font-weight: 350;
  font-style: normal;
  color: white;
  margin-bottom: 1.5em;
}

.red-line {
  text-decoration: line-through red;
}

.credit {
  font-family: "Lexend Deca";
  font-weight: 300;
  font-style: normal;
  color: white;
}

/* link stuff */
.link {
  color: #0000ee;
  text-decoration: none;
  font-size: 16px;
  font-family: "Lexend Deca";
  font-weight: 300;
  font-style: normal;
}
/* mouse over link */
.link:hover {
  font-size: 110%;
}

.price2 {
  font-family: "Lexend Deca";
  font-weight: 350;
  font-style: normal;
  color: white;
  margin-bottom: 1.5em;
}

#method {
  display: inline-block;
}

.methTxt {
  margin-right: 25px;
  margin-top: -10px;
}

#inputs {
  display: inline-block;
}

.submit {
  margin-bottom: 10px;
  margin-left: 5px;
}

/*footer stuff*/
.footer {
  background-color: #02240c;
}

.footer h4 {
  color: white;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

.logo2 {
  height: 100px;
  margin-top: 15px;
  margin-bottom: 20px;
  margin-left: -35px;
}

.footer h1 {
  color: white;
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-style: normal;
  margin-bottom: 15px;
}

.footer h5 {
  color: white;
  font-family: "Lexend Deca";
  font-weight: 300;
  font-style: normal;
  margin-bottom: 20px;
}

.mobile {
  display: none;
}

.desk {
  display: block;
}

@media only screen and (max-width: 600px) {
  .main {
    width: 93.5%;
    margin: auto;
    background-color: #c1c1c1;
  }

  .footer {
    display: flex; /* Use flexbox */
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
  }

  .logo2 {
    height: 100px;
    margin-top: 15px;
    margin-bottom: 20px;
    margin-left: 0px;
  }

  .products {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  .cardImgHolder {
    height: 347px;
  }

  .cardImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .main p {
    font-size: 20px;
    font-family: "Lexend Deca";
    font-weight: 300;
    font-style: normal;
    color: white;
  }

  .mobile {
    display: block;
  }

  .desk {
    display: none;
  }
}

my javascript

// updates the class based on screen width - helps with centering text in the footer
function updateClass() {
  const myDiv = document.getElementById("contactDetails");
  if (window.innerWidth <= 600) {
    myDiv.className = "w3-col s12 m10 l10 contactDetails w3-center";
  } else {
    myDiv.className = "w3-col s12 m10 l10 contactDetails";
  }
}

// event listeners to trigger the update function
window.addEventListener("load", updateClass);
window.addEventListener("resize", updateClass);



// code for image slideshow on product pages
  //essentially changes the css "display" of the imgs
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs((slideIndex += n));
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = x.length;
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}




// menu/hamburger button displaying or not displaying on being clicked
var clicked = false;

function toggleNav() {
    if (!clicked) {

        document.getElementById("mobile-nav").style.display = "block";

        clicked = true;

    } else {

        document.getElementById("mobile-nav").style.display = "none";

        clicked = false;

    }

}

please help

ive messed around with different css attributes but cant get anything to work. i’ve also checked that the file paths are right, which they are because the slideshow works on mobile screens (pixle-width of 600)but not desktop screens

ideally what i want to happen is for my img slide-show to display the images on desktop just like how to do for mobile, but for some reason this isn’t happening right now

Thiết kế website giá rẻ

Danh mục

slide-show images not being displayed in the contaner/flexbox