幻灯片放映图像未显示在容器/弹性盒中

问题描述 投票：0回答：1

我制作了一个具有移动版本和桌面版本的网站，它们各自都可以正常工作，但是当我尝试将两者添加在一起时，桌面版本上的图像幻灯片不会显示图像，但适用于移动设备。我已经搞乱了不同的 css 属性，但无法让任何东西发挥作用。我还检查了文件路径是否正确，这是因为幻灯片可以在移动屏幕（像素宽度为 600）上运行，但不能在桌面屏幕上运行。

（首先显示桌面）：

// 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;

  }

}
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;
  }
}
<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>&#10094; iPhone X &#10095;</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)">
                  &#10094;
                </button>
                  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">
                  &#10095;
                </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>

理想情况下，我想要的情况是让我的 img 幻灯片在桌面上显示图像，就像在移动设备上显示图像一样，但由于某种原因，现在还没有发生。

javascript html css image flexbox
1个回答
0
投票

我不明白你所说的“将它们放在一起”是什么意思。您究竟想实现什么目标？在我看来，如果您有一个适用于移动设备的工作版本和一个适用于桌面设备的版本，为什么不保持原样呢？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.