{"id":256,"date":"2019-10-08T23:16:13","date_gmt":"2019-10-08T23:16:13","guid":{"rendered":"https:\/\/www.antpace.com\/blog\/?p=256"},"modified":"2025-08-25T13:58:59","modified_gmt":"2025-08-25T13:58:59","slug":"image-carousel-update","status":"publish","type":"post","link":"https:\/\/www.antpace.com\/blog\/image-carousel-update\/","title":{"rendered":"Image carousel – update"},"content":{"rendered":"

In a previous post<\/a>, I wrote about creating an image carousel using basic web tech: HTML, CSS, and vanilla JavaScript. No frameworks, no jQuery. This is an update to that. The major difference is that it supports multiple carousels on the same page. I also added a try\/catch, in case no carousel data is found in the database. I recently used this implementation on a WordPress site. Each carousel was a post (of a custom carousel post-type), that had each image attached. On that post-type archive page, I looped through the posts, and created a separate carousel for each.<\/p>\n

Here is the updated JavaScript.<\/p>\n

try{\n    var galleries = document.getElementsByClassName(\"carousel-class\");\n    for(var i = 0; i < galleries.length; i++){\n        showGalleries(galleries.item(i), 0);\n    }\n}catch(e){\n    console.log(e);\n}\n\nfunction showGalleries(gallery, galleryIndex){\n    var galleryDots = gallery.getElementsByClassName(\"dot-button\");\n    var gallerySlides = gallery.getElementsByClassName(\"my-slide\");\n    if (galleryIndex < 0){galleryIndex = gallerySlides.length-1}\n    galleryIndex++;\n    for(var ii = 0; ii < gallerySlides.length; ii++){ gallerySlides[ii].style.display = \"none\"; galleryDots[ii].classList.remove('active-dot'); } if (galleryIndex > gallerySlides.length){galleryIndex = 1}\n    gallerySlides[galleryIndex-1].style.display = \"block\";\n    var resizeEvent = new Event('resize');\n    window.dispatchEvent(resizeEvent);\n    galleryDots[galleryIndex-1].classList.add('active-dot');\n    \/\/hide gallery navigation, if there is only 1\n    if(gallerySlides.length < 2){\n        var dotContainer = gallery.getElementsByClassName(\"dots\");\n        var arrowContainer = gallery.getElementsByClassName(\"gallery-arrows\");\n        dotContainer[0].style.display = \"none\";\n        arrowContainer[0].style.display = \"none\";\n    }\n    gallery.setAttribute(\"data\", galleryIndex);\n}\n\n\/\/gallery dots\ndocument.addEventListener('click', function (event) {\n    if (!event.target.matches('.carousel-class .dot-button')){ return; }\n    var index = event.target.getAttribute(\"data\");\n    var parentGallery = event.target.closest(\".carousel-class\")\n    showGalleries(parentGallery, index);\n\n}, false);\n\n\/\/gallery arrows\n\n\/\/left arrow\ndocument.addEventListener('click', function (event) {\n    if (!event.target.matches('.fa-arrow-left')){ return; }\n    var parentGallery = event.target.closest(\".carousel-class\")\n    var galleryIndex = parentGallery.getAttribute(\"data\");\n    galleryIndex = galleryIndex - 2;\n\n    showGalleries(parentGallery, galleryIndex);\n}, false);\n\n\/\/right arrow\ndocument.addEventListener('click', function (event) {\n    if (!event.target.matches('.fa-arrow-right')){ return; }\n    var parentGallery = event.target.closest(\".carousel-class\")\n    var galleryIndex = parentGallery.getAttribute(\"data\");\n\n    showGalleries(parentGallery, galleryIndex);\n}, false);\n\n<\/pre>\n
You’ll notice that each carousel section has a data attribute assigned, so our JS knows which one to affect. This version also includes left and right navigation arrows, in addition to the navigation dots we already had.<\/p>\n
HTML:<\/p>\n
<div class=\"ap-carousel\" data=\"0\">\n\n<?php $num_slides = 0; foreach($posts as $post){ $num_slides++; ?>\n\n\t<div class=\"ap-slide\">\n\t\t<a href=\"<?php the_permalink($post->ID); ?>\" title=\"<?php the_title(); ?>\">\n\t\t\t<img src=\"<?php echo esc_url(get_the_post_thumbnail_url($post->ID)); ?>\" class=\"zoom\">\n\t\t<\/a>\n\t<\/div>\n\n<?php } ?>\n<div class=\"nav-dots\">\n\t<?php $active = \"active-dot\"; for($x = 0; $x < $num_slides; $x++){ ?>\n\t\t<div class=\"dot\"><button data=\"<?php echo $x; ?>\" type=\"button\" class=\"dot-button <?php echo $active; $active = ''; ?>\">b<\/button><\/div>\n\t<?php } ?>\n<\/div>\n<div class=\"gallery-arrows\">\n    <i class=\"fas fa-arrow-left\"><\/i>\n    <i class=\"fas fa-arrow-right\"><\/i>\n<\/div>\n\n\n<\/div>\n<\/pre>\n
I emphasize simplicity when building solutions. I avoid including\u00a0superfluous code libraries when a vanilla technique works. It’s helpful to keep track of solutions I engineer, and try to reuse them where they fit. And when they need to be adjusted to work with a new problem, I enhance them while still trying to avoid complexity.<\/p>\n","protected":false},"excerpt":{"rendered":"
In a previous post, I wrote about creating an image carousel using basic web tech: HTML, CSS, and vanilla JavaScript. No frameworks, no jQuery. This is an update to that. The major difference is that it supports multiple carousels on the same page. I also added a try\/catch, in case no carousel data is found … <\/p>\n
Continue reading “Image carousel – update”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3155,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"_links":{"self":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/comments?post=256"}],"version-history":[{"count":1,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/256\/revisions"}],"predecessor-version":[{"id":3156,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/256\/revisions\/3156"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media\/3155"}],"wp:attachment":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media?parent=256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/categories?post=256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/tags?post=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}