Image Carousels (Swiper.js)

Swiper.js is a modern, third-party library integrated into the Vandore Heritage website to create touch-enabled, responsive image carousels and sliders. The primary purpose of this integration is to display collections of images, such as property photos or featured content, in an interactive and space-efficient format.

The library is consistently loaded across multiple pages of the website, including about.html, contact.html, and properties.html, which indicates its intended widespread use. However, the specific HTML markup and initialization configurations for the carousels are not present in the analyzed files, suggesting they reside in other parts of the codebase (like index.html or property_details.html) or are generated dynamically.

Core Library Integration

The Swiper.js functionality is integrated into the project's front-end through script inclusions in the main HTML files. This setup consists of two key script files loaded at the end of the <body> tag to ensure the DOM is ready before the scripts execute.

1. js/vendor/swiper-bundle.min.js: This is the core, minified library file from the Swiper.js vendor. It contains all the necessary logic to create and manage the carousels.
2. js/swiper-script.js: This is a custom project-specific script. Its role is to initialize the Swiper instances on the page, applying custom configurations, event listeners, and responsive settings.

The following diagram illustrates the loading sequence of these scripts when a user visits a page.

Sources: about.html:566-567, contact.html:488-489, properties.html:560-561, 404.html:86-87

Carousel Initialization and Configuration

The initialization of all Swiper carousels is handled by js/swiper-script.js. This script is responsible for finding the carousel containers in the HTML and instantiating the Swiper object with a set of configuration options.

Important Note: The content of js/swiper-script.js was not available for analysis. Consequently, specific details about the carousel configurations cannot be documented. This includes:

• Navigation controls (next/previous buttons)
• Pagination (dots/bullets)
• Autoplay settings
• Responsive breakpoints
• Effects (e.g., slide, fade, cube)
• Number of slides per view

The presence of this file is confirmed by its inclusion in multiple HTML pages, but its logic remains unknown.

Sources: about.html:567, contact.html:489, properties.html:561, 404.html:87

Expected HTML Structure

While no active Swiper carousels were found in the analyzed HTML files, they require a specific markup structure to function correctly. A typical implementation would look like the following:

<!-- Example Swiper HTML Structure (Not found in provided files) -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- Slide Content (e.g., an image) -->
      <img src="path/to/image1.jpg" alt="Description">
    </div>
    <div class="swiper-slide">
      <!-- Slide Content -->
      <img src="path/to/image2.jpg" alt="Description">
    </div>
  </div>
  
  <!-- Optional: Pagination -->
  <div class="swiper-pagination"></div>
  
  <!-- Optional: Navigation Buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

The absence of this structure in files like about.html and properties.html suggests that carousels are either implemented on pages not included in the analysis (e.g., index.html, property_details.html) or are rendered dynamically via JavaScript.

Sources: Analysis of about.html(), contact.html(), properties.html(), 404.html()

Interaction with Other Scripts

The file js/script.js contains a generic tab-switching functionality that may be used in conjunction with Swiper carousels. This script allows content sections to be shown or hidden based on user clicks on tab elements. It is plausible that Swiper carousels are embedded within these tabbed content panes, allowing users to switch between different sets of images or featured items.

The logic for this feature is as follows:

The corresponding code snippet demonstrates this jQuery-based event handling:

// File: js/script.js:16-26
$(document).on('click', '.tab', function () {
    let tabs = $(this).closest('.tabs');
    let tabContent = tabs.siblings('.tab-content');

    tabs.find('.tab').removeClass('active');
    $(this).addClass("active");

    let selectedTab = $(this).data("tab");
    tabContent.find(".content").removeClass("active");
    tabContent.find("#" + selectedTab).addClass("active");
});

While there is no direct code linking this tab system to Swiper, it provides a mechanism for organizing complex layouts that could contain carousels.

Sources: js/script.js:16-26

Summary

The Vandore Heritage website is architected to support rich, interactive image carousels using the Swiper.js library. The foundational setup, including loading the vendor library and a custom initialization script, is present across key pages. However, due to the absence of the js/swiper-script.js content and specific HTML markup in the analyzed files, the precise implementation details, configurations, and locations of the carousels remain undocumented. The site's general scripting capabilities, such as the tabbed interface, provide a flexible framework where such carousels could be effectively utilized.