I've 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 the desktop version doesn't display the images but works for mobile. I've messed around with different css attributes but can't get anything to work. I've also checked that the file paths are right, which they are because the slideshow works on mobile screens (pixel-width of 600) but not desktop screens.
(desktop displayed first):
// updates the class based on screen width - helps with centering text in the footerfunction 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 functionwindow.addEventListener("load", updateClass);window.addEventListener("resize", updateClass);// code for image slideshow on product pages//essentially changes the css "display" of the imgsvar 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 clickedvar 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>❮ 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="support@array.com"> support@array.com</a></h5></div></div></div><script src="product.js"></script></body>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.