I’m building a SPA and on one page, I have products with color icons below. When clicking on the icons, the image above should change to the color indicated by the button (using JS, onclick). It works on all media queries 992px and below. Once I hit 993px, it no longer changes the image. What am I missing?
Snippet: Light version of site with product issue
Please note: There are other formatting issues that I am aware of. I’ve made a lot of “experimental” changes in an effort to fix this issue.
TIA!
<code><!DOCTYPE html>
<html lang="EN">
<head>
<title>All American Mailboxes of Houston</title>
<link href="assets/AAM.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="/assets/flagcon.ico" />
<link rel="canonical" href="https://www.allamericanmailboxesofhouston.com" />
<meta name="robots" content="index, follow">
<meta charset="utf-16">
<meta name="copyright" content="©2021 All American Mailboxes of Houston">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-control" content="no-cache">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://allamericanmailboxesofhouston.com/assets/AAM.css" type="text/css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body class="mainPage">
<header style="text-align:center;" id="header"><img src="https://allamericanmailboxesofhouston.com/assets/AAMH.webp" id="logo"></header>
<!-- Navbar items -->
<div id="navlist" class="w3-hide-small navlist">
<a href="#" id="button1" class="nav__item-text home_btn" onClick="replaceContentInContainer('mainHolderLarge', 'home');">Home</a>
<a href="#" id="button2" class="nav__item-text products_btn" onClick="replaceContentInContainer('mainHolderLarge', 'products');">Products</a>
<a href="#" id="button3" class="nav__item-text compat_btn" onClick="replaceContentInContainer('mainHolderLarge', 'compatibility');">Compatibility</a>
<a href="#" id="button4" class="nav__item-text contact_btn" onClick="replaceContentInContainer('mainHolderLarge', 'contact');">Contact Us</a>
</div>
<button class="w3-bar-item w3-button w3-xxlarge w3-hover-theme w3-hide-medium w3-hide-large" onclick="openSidebar()" id="open" style="margin-left: auto; margin-right: auto; display:block;">☰</button>
<button class="w3-bar-item w3-button w3-xxlarge w3-hover-theme w3-hide-medium w3-hide-large" style="display:none; margin-left: auto; margin-right: auto;" onclick="" id="close">☰</button>
<nav class="w3-sidebar w3-bar-block w3-card w3-hide-medium w3-hide-large" style="width:100%; display: none; position:static !important;" id="mySidebar">
<div class="nav__content" style="width:100%">
<span onclick="" class="w3-button w3-display-topright w3-xlarge w3-hide-medium w3-hide-large">X</span>
<a href="#" id="button5" class="nav__item-text home_btn" onClick="replaceContentInContainer('mainHolder', 'home');">Home</a>
<a href="#" id="button6" class="nav__item-text products_btn" onClick="replaceContentInContainer('mainHolder', 'products');">Products</a>
<a href="#" id="button7" class="nav__item-text compat_btn" onClick="replaceContentInContainer('mainHolder', 'compatibility');">Compatibility</a>
<a href="#" id="button8" class="nav__item-text contact_btn" onClick="replaceContentInContainer('mainHolder', 'contact');">Contact Us</a>
</div>
</nav>
<div id="mainHolder" class="w3-content w3-padding-8 w3-hide-large" name="main" style="height: auto;">
<!-- <div onClick="screen()" id="screen" style="border:solid 1pt black; margin-top:10vh; z-index:10000;">CLICK HERE</div>-->
<p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
</div>
<div id="mainHolderLarge" class="w3-content w3-padding-32 w3-hide-small w3-hide-medium" name="mainLarge" style="height: auto;">
<p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
</div>
<!--Holds home page content to swap into mainHolders -->
<div id="home" class="w3-content w3-padding-8 w3-hide-large" name="mainContent" style="height: auto;" hidden>
<p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
</div>
<div class="w3-content w3-justify w3-padding-64" id="products" style="height: auto;" hidden>
<div class="banner">
<img src="https://allamericanmailboxesofhouston.com/images/prods/Products_Banner(1).webp" style="max-width: 100%;">
<p style="font-size: 1.5rem; text-align: center;">We represent all major brands of apartment and commercial mailboxes in the industry. All of our products are approved by the U.S. Postal Service, and we proudly service mailboxes throughout the State of Texas</p>
</div>
<div class="CBU" id="CBU">
<h2 style="">Cluster Box Unit (CBU) Pedestal Mailboxes</h2>
<ul>
<li>For outdoor centralized mail delivery</li>
<li>CBU Pedestal mailboxes include 3 keys per tenant</li>
<li>Engraved doors available</li>
<li>Six types of CBU’s to meet tenant compartment and parcel locker needs</li>
<li>Available in Sandstone, Black, Dark Bronze, Postal Grey, Forest Green, and White</li>
</ul>
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_WH.webp" alt="Color Previews" id="CBU_WH" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_BK.webp" alt="Color Previews" id="CBU_BK" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_DB.webp" alt="Color Previews" id="CBU_DB" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_FG.webp" alt="Color Previews" id="CBU_FG" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_PG.webp" alt="Color Previews" id="CBU_PG" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_SD.webp" alt="Color Previews" id="CBU_SD" style="display:none;" />
<div style="background-color: #f0f0f0;">
<button type="button" onclick="changeColor('CBU_WH')" style="background-image: url('images/prods/CBU/WH.webp')" id="CBUWHbutton"></button>
<button type="button" onClick="changeColor('CBU_BK')" style="background-image: url('images/prods/CBU/BK.webp')" id="CBUBKbutton"></button>
<button type="button" onclick="changeColor('CBU_DB')" style="background-image: url('images/prods/CBU/DB.webp')" id="CBUDBbutton"></button>
<button type="button" onclick="changeColor('CBU_FG')" style="background-image: url('images/prods/CBU/FG.webp')" id="CBUFGbutton"></button>
<button type="button" onclick="changeColor('CBU_PG')" style="background-image: url('images/prods/CBU/PG.webp')" id="CBUPGbutton"></button>
<button type="button" onclick="changeColor('CBU_SD')" style="background-image: url('images/prods/CBU/SD.webp')" id="CBUSDbutton"></button>
</div>
</div>
<img src="https://allamericanmailboxesofhouston.com/images/prods/Prods_Bottom_Banner.webp" style="max-width: 95%; margin-top: 15%; margin-bottom: -17%;">
</div>
<div class="w3-content w3-justify w3-padding-64" id="compatibility" style="height: auto;" hidden>
Content removed for brevity
</div>
<div class="w3-content w3-justify w3-padding-64" id="contact" style="height: auto;" hidden>
Content removed for brevity
</div>
</div>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html lang="EN">
<head>
<title>All American Mailboxes of Houston</title>
<link href="assets/AAM.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="/assets/flagcon.ico" />
<link rel="canonical" href="https://www.allamericanmailboxesofhouston.com" />
<meta name="robots" content="index, follow">
<meta charset="utf-16">
<meta name="copyright" content="©2021 All American Mailboxes of Houston">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-control" content="no-cache">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://allamericanmailboxesofhouston.com/assets/AAM.css" type="text/css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body class="mainPage">
<header style="text-align:center;" id="header"><img src="https://allamericanmailboxesofhouston.com/assets/AAMH.webp" id="logo"></header>
<!-- Navbar items -->
<div id="navlist" class="w3-hide-small navlist">
<a href="#" id="button1" class="nav__item-text home_btn" onClick="replaceContentInContainer('mainHolderLarge', 'home');">Home</a>
<a href="#" id="button2" class="nav__item-text products_btn" onClick="replaceContentInContainer('mainHolderLarge', 'products');">Products</a>
<a href="#" id="button3" class="nav__item-text compat_btn" onClick="replaceContentInContainer('mainHolderLarge', 'compatibility');">Compatibility</a>
<a href="#" id="button4" class="nav__item-text contact_btn" onClick="replaceContentInContainer('mainHolderLarge', 'contact');">Contact Us</a>
</div>
<button class="w3-bar-item w3-button w3-xxlarge w3-hover-theme w3-hide-medium w3-hide-large" onclick="openSidebar()" id="open" style="margin-left: auto; margin-right: auto; display:block;">☰</button>
<button class="w3-bar-item w3-button w3-xxlarge w3-hover-theme w3-hide-medium w3-hide-large" style="display:none; margin-left: auto; margin-right: auto;" onclick="" id="close">☰</button>
<nav class="w3-sidebar w3-bar-block w3-card w3-hide-medium w3-hide-large" style="width:100%; display: none; position:static !important;" id="mySidebar">
<div class="nav__content" style="width:100%">
<span onclick="" class="w3-button w3-display-topright w3-xlarge w3-hide-medium w3-hide-large">X</span>
<a href="#" id="button5" class="nav__item-text home_btn" onClick="replaceContentInContainer('mainHolder', 'home');">Home</a>
<a href="#" id="button6" class="nav__item-text products_btn" onClick="replaceContentInContainer('mainHolder', 'products');">Products</a>
<a href="#" id="button7" class="nav__item-text compat_btn" onClick="replaceContentInContainer('mainHolder', 'compatibility');">Compatibility</a>
<a href="#" id="button8" class="nav__item-text contact_btn" onClick="replaceContentInContainer('mainHolder', 'contact');">Contact Us</a>
</div>
</nav>
<div id="mainHolder" class="w3-content w3-padding-8 w3-hide-large" name="main" style="height: auto;">
<!-- <div onClick="screen()" id="screen" style="border:solid 1pt black; margin-top:10vh; z-index:10000;">CLICK HERE</div>-->
<p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
</div>
<div id="mainHolderLarge" class="w3-content w3-padding-32 w3-hide-small w3-hide-medium" name="mainLarge" style="height: auto;">
<p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
</div>
<!--Holds home page content to swap into mainHolders -->
<div id="home" class="w3-content w3-padding-8 w3-hide-large" name="mainContent" style="height: auto;" hidden>
<p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
</div>
<div class="w3-content w3-justify w3-padding-64" id="products" style="height: auto;" hidden>
<div class="banner">
<img src="https://allamericanmailboxesofhouston.com/images/prods/Products_Banner(1).webp" style="max-width: 100%;">
<p style="font-size: 1.5rem; text-align: center;">We represent all major brands of apartment and commercial mailboxes in the industry. All of our products are approved by the U.S. Postal Service, and we proudly service mailboxes throughout the State of Texas</p>
</div>
<div class="CBU" id="CBU">
<h2 style="">Cluster Box Unit (CBU) Pedestal Mailboxes</h2>
<ul>
<li>For outdoor centralized mail delivery</li>
<li>CBU Pedestal mailboxes include 3 keys per tenant</li>
<li>Engraved doors available</li>
<li>Six types of CBU’s to meet tenant compartment and parcel locker needs</li>
<li>Available in Sandstone, Black, Dark Bronze, Postal Grey, Forest Green, and White</li>
</ul>
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_WH.webp" alt="Color Previews" id="CBU_WH" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_BK.webp" alt="Color Previews" id="CBU_BK" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_DB.webp" alt="Color Previews" id="CBU_DB" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_FG.webp" alt="Color Previews" id="CBU_FG" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_PG.webp" alt="Color Previews" id="CBU_PG" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_SD.webp" alt="Color Previews" id="CBU_SD" style="display:none;" />
<div style="background-color: #f0f0f0;">
<button type="button" onclick="changeColor('CBU_WH')" style="background-image: url('images/prods/CBU/WH.webp')" id="CBUWHbutton"></button>
<button type="button" onClick="changeColor('CBU_BK')" style="background-image: url('images/prods/CBU/BK.webp')" id="CBUBKbutton"></button>
<button type="button" onclick="changeColor('CBU_DB')" style="background-image: url('images/prods/CBU/DB.webp')" id="CBUDBbutton"></button>
<button type="button" onclick="changeColor('CBU_FG')" style="background-image: url('images/prods/CBU/FG.webp')" id="CBUFGbutton"></button>
<button type="button" onclick="changeColor('CBU_PG')" style="background-image: url('images/prods/CBU/PG.webp')" id="CBUPGbutton"></button>
<button type="button" onclick="changeColor('CBU_SD')" style="background-image: url('images/prods/CBU/SD.webp')" id="CBUSDbutton"></button>
</div>
</div>
<img src="https://allamericanmailboxesofhouston.com/images/prods/Prods_Bottom_Banner.webp" style="max-width: 95%; margin-top: 15%; margin-bottom: -17%;">
</div>
<div class="w3-content w3-justify w3-padding-64" id="compatibility" style="height: auto;" hidden>
Content removed for brevity
</div>
<div class="w3-content w3-justify w3-padding-64" id="contact" style="height: auto;" hidden>
Content removed for brevity
</div>
</div>
</body>
</html>
</code>
<!DOCTYPE html>
<html lang="EN">
<head>
<title>All American Mailboxes of Houston</title>
<link href="assets/AAM.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="/assets/flagcon.ico" />
<link rel="canonical" href="https://www.allamericanmailboxesofhouston.com" />
<meta name="robots" content="index, follow">
<meta charset="utf-16">
<meta name="copyright" content="©2021 All American Mailboxes of Houston">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-control" content="no-cache">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://allamericanmailboxesofhouston.com/assets/AAM.css" type="text/css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body class="mainPage">
<header style="text-align:center;" id="header"><img src="https://allamericanmailboxesofhouston.com/assets/AAMH.webp" id="logo"></header>
<!-- Navbar items -->
<div id="navlist" class="w3-hide-small navlist">
<a href="#" id="button1" class="nav__item-text home_btn" onClick="replaceContentInContainer('mainHolderLarge', 'home');">Home</a>
<a href="#" id="button2" class="nav__item-text products_btn" onClick="replaceContentInContainer('mainHolderLarge', 'products');">Products</a>
<a href="#" id="button3" class="nav__item-text compat_btn" onClick="replaceContentInContainer('mainHolderLarge', 'compatibility');">Compatibility</a>
<a href="#" id="button4" class="nav__item-text contact_btn" onClick="replaceContentInContainer('mainHolderLarge', 'contact');">Contact Us</a>
</div>
<button class="w3-bar-item w3-button w3-xxlarge w3-hover-theme w3-hide-medium w3-hide-large" onclick="openSidebar()" id="open" style="margin-left: auto; margin-right: auto; display:block;">☰</button>
<button class="w3-bar-item w3-button w3-xxlarge w3-hover-theme w3-hide-medium w3-hide-large" style="display:none; margin-left: auto; margin-right: auto;" onclick="" id="close">☰</button>
<nav class="w3-sidebar w3-bar-block w3-card w3-hide-medium w3-hide-large" style="width:100%; display: none; position:static !important;" id="mySidebar">
<div class="nav__content" style="width:100%">
<span onclick="" class="w3-button w3-display-topright w3-xlarge w3-hide-medium w3-hide-large">X</span>
<a href="#" id="button5" class="nav__item-text home_btn" onClick="replaceContentInContainer('mainHolder', 'home');">Home</a>
<a href="#" id="button6" class="nav__item-text products_btn" onClick="replaceContentInContainer('mainHolder', 'products');">Products</a>
<a href="#" id="button7" class="nav__item-text compat_btn" onClick="replaceContentInContainer('mainHolder', 'compatibility');">Compatibility</a>
<a href="#" id="button8" class="nav__item-text contact_btn" onClick="replaceContentInContainer('mainHolder', 'contact');">Contact Us</a>
</div>
</nav>
<div id="mainHolder" class="w3-content w3-padding-8 w3-hide-large" name="main" style="height: auto;">
<!-- <div onClick="screen()" id="screen" style="border:solid 1pt black; margin-top:10vh; z-index:10000;">CLICK HERE</div>-->
<p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
</div>
<div id="mainHolderLarge" class="w3-content w3-padding-32 w3-hide-small w3-hide-medium" name="mainLarge" style="height: auto;">
<p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
</div>
<!--Holds home page content to swap into mainHolders -->
<div id="home" class="w3-content w3-padding-8 w3-hide-large" name="mainContent" style="height: auto;" hidden>
<p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
</div>
<div class="w3-content w3-justify w3-padding-64" id="products" style="height: auto;" hidden>
<div class="banner">
<img src="https://allamericanmailboxesofhouston.com/images/prods/Products_Banner(1).webp" style="max-width: 100%;">
<p style="font-size: 1.5rem; text-align: center;">We represent all major brands of apartment and commercial mailboxes in the industry. All of our products are approved by the U.S. Postal Service, and we proudly service mailboxes throughout the State of Texas</p>
</div>
<div class="CBU" id="CBU">
<h2 style="">Cluster Box Unit (CBU) Pedestal Mailboxes</h2>
<ul>
<li>For outdoor centralized mail delivery</li>
<li>CBU Pedestal mailboxes include 3 keys per tenant</li>
<li>Engraved doors available</li>
<li>Six types of CBU’s to meet tenant compartment and parcel locker needs</li>
<li>Available in Sandstone, Black, Dark Bronze, Postal Grey, Forest Green, and White</li>
</ul>
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_WH.webp" alt="Color Previews" id="CBU_WH" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_BK.webp" alt="Color Previews" id="CBU_BK" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_DB.webp" alt="Color Previews" id="CBU_DB" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_FG.webp" alt="Color Previews" id="CBU_FG" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_PG.webp" alt="Color Previews" id="CBU_PG" style="display:none;" />
<img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_SD.webp" alt="Color Previews" id="CBU_SD" style="display:none;" />
<div style="background-color: #f0f0f0;">
<button type="button" onclick="changeColor('CBU_WH')" style="background-image: url('images/prods/CBU/WH.webp')" id="CBUWHbutton"></button>
<button type="button" onClick="changeColor('CBU_BK')" style="background-image: url('images/prods/CBU/BK.webp')" id="CBUBKbutton"></button>
<button type="button" onclick="changeColor('CBU_DB')" style="background-image: url('images/prods/CBU/DB.webp')" id="CBUDBbutton"></button>
<button type="button" onclick="changeColor('CBU_FG')" style="background-image: url('images/prods/CBU/FG.webp')" id="CBUFGbutton"></button>
<button type="button" onclick="changeColor('CBU_PG')" style="background-image: url('images/prods/CBU/PG.webp')" id="CBUPGbutton"></button>
<button type="button" onclick="changeColor('CBU_SD')" style="background-image: url('images/prods/CBU/SD.webp')" id="CBUSDbutton"></button>
</div>
</div>
<img src="https://allamericanmailboxesofhouston.com/images/prods/Prods_Bottom_Banner.webp" style="max-width: 95%; margin-top: 15%; margin-bottom: -17%;">
</div>
<div class="w3-content w3-justify w3-padding-64" id="compatibility" style="height: auto;" hidden>
Content removed for brevity
</div>
<div class="w3-content w3-justify w3-padding-64" id="contact" style="height: auto;" hidden>
Content removed for brevity
</div>
</div>
</body>
</html>
5
You don’t need to write JavaScript code yourself with W3E (W3.CSS w/JavaScript) just add w3e-slider to the container element. The W3E will assign the click events automagically.
Check this example on CodePen: https://codepen.io/emnawer/pen/zYVZOwm
<code><div class="w3-content w3e-slider" style=" position: relative;">
<img class="w3-animate-opacity w3e-slide w3-show" src="https://cdn.pixabay.com/photo/2014/10/24/15/08/sky-501350_960_720.jpg" style="width: 100%;">
<img class="w3-animate-opacity w3e-slide" src="https://cdn.pixabay.com/photo/2018/06/06/11/21/cape-robin-chat-3457709_960_720.jpg" style="width: 100%;">
<img class="w3-animate-opacity w3e-slide" src="https://cdn.pixabay.com/photo/2020/03/18/01/35/dahlia-4942346_960_720.jpg" style="width: 100%;">
<a class="w3-button w3-hover-dark-grey" style="position: absolute; top: 45%; left: 0px;">❮</a>
<a class="w3-button w3-hover-dark-grey" style="position: absolute; top: 45%; right: 0px;">❯</a>
</div>
</code>
<code><div class="w3-content w3e-slider" style=" position: relative;">
<img class="w3-animate-opacity w3e-slide w3-show" src="https://cdn.pixabay.com/photo/2014/10/24/15/08/sky-501350_960_720.jpg" style="width: 100%;">
<img class="w3-animate-opacity w3e-slide" src="https://cdn.pixabay.com/photo/2018/06/06/11/21/cape-robin-chat-3457709_960_720.jpg" style="width: 100%;">
<img class="w3-animate-opacity w3e-slide" src="https://cdn.pixabay.com/photo/2020/03/18/01/35/dahlia-4942346_960_720.jpg" style="width: 100%;">
<a class="w3-button w3-hover-dark-grey" style="position: absolute; top: 45%; left: 0px;">❮</a>
<a class="w3-button w3-hover-dark-grey" style="position: absolute; top: 45%; right: 0px;">❯</a>
</div>
</code>
<div class="w3-content w3e-slider" style=" position: relative;">
<img class="w3-animate-opacity w3e-slide w3-show" src="https://cdn.pixabay.com/photo/2014/10/24/15/08/sky-501350_960_720.jpg" style="width: 100%;">
<img class="w3-animate-opacity w3e-slide" src="https://cdn.pixabay.com/photo/2018/06/06/11/21/cape-robin-chat-3457709_960_720.jpg" style="width: 100%;">
<img class="w3-animate-opacity w3e-slide" src="https://cdn.pixabay.com/photo/2020/03/18/01/35/dahlia-4942346_960_720.jpg" style="width: 100%;">
<a class="w3-button w3-hover-dark-grey" style="position: absolute; top: 45%; left: 0px;">❮</a>
<a class="w3-button w3-hover-dark-grey" style="position: absolute; top: 45%; right: 0px;">❯</a>
</div>
It utilities W3E (W3.CSS w/JavaScript): https://w3e.uk
2