On a recent project, I needed a simple image carousel on the homepage. And then, on the gallery page I needed a fully polished solution. Sometimes, using a framework is the right choice. Others, a fully built out toolkit can be overkill.<\/p>\n
The Vanilla Option<\/h2>\n
First, here is the home-rolled version that I came up with. It was integrated into a custom WordPress template. I loop through a set of posts within my carousel wrapper, creating a slide div with that record’s featured image. I keep track of how many slides get built. Beneath the carousel wrapper I create a navigation div, and build a dot button for each slide. Each dot gets an index assigned to it, saved to its button’s data attribute.<\/p>\n
Finally, I create a JS function to change the slide and active dot based on a timer. I attach an event listener to the dots that will change the active slide based on the saved index data.<\/p>\n
var slideIndex = 0;\nshowSlides();\n\nfunction showSlides() {\n\tvar i;\n\tvar slides = document.getElementsByClassName(\"ap-slide\");\n\tvar dots = document.getElementsByClassName(\"dot-button\");\n\tfor (i = 0; i < slides.length; i++) { slides[i].style.display = \"none\"; dots[i].classList.remove(\"active-dot\"); } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1}\n\tslides[slideIndex-1].style.display = \"block\";\n\tdots[slideIndex-1].classList.add(\"active-dot\")\n\tsetTimeout(showSlides, 5000); \/\/ Change image every 5 seconds\n}\n\ndocument.addEventListener('click', function(event){\n\tif(!event.target.matches('.dot-button')) return;\n\n\tslideIndex = event.target.getAttribute(\"data\");\n\tshowSlides();\n}, false);\n\n<\/pre>\n
That’s a simple and lite solution. It worked fine for the homepage of this recent project, but the main gallery page needed something more complex. I choose Galleria, a JavaScript framework.<\/p>\n
The Framework Option<\/h2>\nCarousel showcasing artwork<\/figcaption><\/figure>\n
I implemented this option onto the WordPress category archive page. For this project, each piece of artwork is its own post. In my category template file I loop through posts, and populate a JSON object with the data about each slide. Initially, I had built HTML elements for each slide, but that caused slow page load times. The JSON data option is significantly faster. Here’s what my code setup looked like:<\/p>\n
On a recent project, I needed a simple image carousel on the homepage. And then, on the gallery page I needed a fully polished solution. Sometimes, using a framework is the right choice. Others, a fully built out toolkit can be overkill. The Vanilla Option First, here is the home-rolled version that I came up … <\/p>\n
![\"Carousel](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/09\/art-carousel.png\")