Adding an image carousel would allow me to quickly showcase my work in the ↯ Artwork tab. It would also give me the know-how to add additional features as mentioned in the conclusion.

Introduction

In the world of web design, dynamic visual elements like image carousels have become increasingly popular for enhancing user engagement and presenting content in an interactive and visually appealing manner. In this blog post, we will explore how to integrate image carousels into your Jekyll-themed website to create an eye-catching and captivating user experience.

Why Choose Image Carousels

Image carousels, also known as sliders or slideshows, are versatile tools for showcasing a series of images, portfolios, featured content, or important announcements. They allow you to conserve space while providing an engaging way for visitors to interact with your website’s content.

Step-by-Step Guide: Integrating Image Carousels into a Jekyll Theme Website

Step 1: Choose a Carousel Plugin

Start by selecting a suitable carousel plugin for your Jekyll theme. There are various plugins available that offer customizable and responsive carousels. Two popular choices are:

• Slick Carousel: A highly customizable and responsive carousel plugin that offers a range of options for customization.
• Owl Carousel: Another powerful and flexible carousel plugin that’s easy to implement and customize.

For the purpose of this guide, we’ll use the Slick Carousel plugin.

Step 2: Installation

1. Open your Jekyll project’s directory in your code editor.
2. Navigate to your project’s root directory and locate the _includes folder.
3. Create a new directory named carousel within the _includes folder to house your carousel files.
4. Download the Slick Carousel CSS and JS files from the Slick Carousel website and place them in your project’s assets directory (e.g., assets/css and assets/js).

Step 3: Create the Carousel Layout

1. Within the _includes/carousel directory, create a new HTML file named carousel.html.
2. In the carousel.html file, structure your carousel markup. A basic example might look like this:

<div class="carousel">
  <div class="carousel-item">
    <img src="/path/to/image1.jpg" alt="Image 1">
  </div>
  <div class="carousel-item">
    <img src="/path/to/image2.jpg" alt="Image 2">
  </div>
  <!-- Add more slides as needed -->
</div>

Step 4: Styling

1. Open your main CSS file (e.g., assets/css/style.css) and add styles to customize the appearance of your carousel. You can target the .carousel class and its child elements to adjust the layout, transitions, and other visual aspects.

Step 5: Initialization

1. Open the main JavaScript file (e.g., assets/js/main.js) and initialize the Slick Carousel using the following code:

$(document).ready(function(){
  $('.carousel').slick({
    // Customize your carousel options here
  });
});

Step 6: Include the Carousel in Pages

1. Open the Markdown file where you want to include the carousel (e.g., index.md).
2. Use Jekyll’s Liquid tags to include the carousel into your content:

{% include carousel/carousel.html %}

Step 7: Testing and Customization

1. Run your Jekyll server to see the carousel in action.
2. Tweak the Slick Carousel options in the JavaScript initialization code to achieve the desired behavior and appearance.

Conclusion

We now have image carousels for the quick viewing of artwork in the ↯ Artwork tab!

Some additional features I could work on with this new knowledge would be latest post section to the homepage, or add a windows file-explorer type menu for large amounts of files to be shared on the website, or even a scrolling announcement-type billboard for showing any changes/updates on the homepage directly.