{"id":4,"date":"2023-04-15T15:35:34","date_gmt":"2023-04-15T15:35:34","guid":{"rendered":"https:\/\/cybertechadvice.com\/home\/"},"modified":"2025-10-04T16:51:49","modified_gmt":"2025-10-04T16:51:49","slug":"home","status":"publish","type":"page","link":"https:\/\/cybertechadvice.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"main-image-container\">\n  &lt;img id=\"main-image\" src=\"image1.jpg\" alt=\"Main Image\" \/>\n&lt;\/div>\n\n&lt;div class=\"thumbnail-slider-container\">\n  &lt;div class=\"thumbnail-slider\">\n    &lt;img src=\"thumb1.jpg\" alt=\"Thumbnail 1\" class=\"thumbnail\" onclick=\"changeImage('image1.jpg')\" \/>\n    &lt;img src=\"thumb2.jpg\" alt=\"Thumbnail 2\" class=\"thumbnail\" onclick=\"changeImage('image2.jpg')\" \/>\n    &lt;img src=\"thumb3.jpg\" alt=\"Thumbnail 3\" class=\"thumbnail\" onclick=\"changeImage('image3.jpg')\" \/>\n    &lt;!-- Add more thumbnails as needed -->\n  &lt;\/div>\n&lt;\/div>\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.thumbnail-slider-container {\n  overflow-x: scroll; \/* Allows horizontal scrolling *\/\n  white-space: nowrap; \/* Prevents thumbnails from wrapping to the next line *\/\n  position: fixed; \/* Fixes the slider to the viewport *\/\n  bottom: 0;\n  width: 100%;\n  background-color: #333;\n  padding: 10px 0;\n}\n\n.thumbnail-slider {\n  display: inline-block; \/* Makes the div act like an element that can be horizontally scrolled *\/\n}\n\n.thumbnail {\n  width: 80px;\n  height: 60px;\n  object-fit: cover; \/* Ensures images fill their container without distortion *\/\n  margin: 0 5px;\n  cursor: pointer;\n  border: 2px solid transparent;\n  transition: border-color 0.3s;\n}\n\n.thumbnail.active {\n  border-color: #fff; \/* Highlights the active thumbnail *\/\n}\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>function changeImage(imageSrc) {\n  document.getElementById('main-image').src = imageSrc;\n}\n\n\/\/ Add a class to the active thumbnail\nconst thumbnails = document.querySelectorAll('.thumbnail');\nthumbnails.forEach(thumb => {\n  thumb.addEventListener('click', () => {\n    thumbnails.forEach(t => t.classList.remove('active'));\n    thumb.classList.add('active');\n  });\n});\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/frontpage.php","meta":{"footnotes":""},"class_list":["post-4","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cybertechadvice.com\/index.php?rest_route=\/wp\/v2\/pages\/4","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cybertechadvice.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cybertechadvice.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cybertechadvice.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cybertechadvice.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4"}],"version-history":[{"count":6,"href":"https:\/\/cybertechadvice.com\/index.php?rest_route=\/wp\/v2\/pages\/4\/revisions"}],"predecessor-version":[{"id":394,"href":"https:\/\/cybertechadvice.com\/index.php?rest_route=\/wp\/v2\/pages\/4\/revisions\/394"}],"wp:attachment":[{"href":"https:\/\/cybertechadvice.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}