Implementation:Sail sg LongSpec Bulma Carousel

Knowledge Sources	Sail_sg_LongSpec
Domains	Frontend, Website
Last Updated	2026-02-14 05:00 GMT

Overview

Vendor JavaScript library providing carousel/slider UI components for the project website, built on Bulma CSS framework.

Description

The bulma-carousel.js file is a third-party webpack-bundled JavaScript library that provides image/content carousel functionality for the LongSpec project website. It is a UMD module exported as bulmaCarousel and includes touch/swipe support, navigation controls, autoplay, and responsive layout features. This is vendor code, not authored by the LongSpec team.

Usage

This file is loaded by the project website HTML pages to render interactive carousels for presenting results or figures. It is not part of the training or inference pipeline.

Code Reference

Source Location

• Repository: Sail_sg_LongSpec
• File: static/js/bulma-carousel.js
• Lines: 1-2371

Signature

// UMD module: bulmaCarousel
(function webpackUniversalModuleDefinition(root, factory) {
    // exports as CommonJS, AMD, or global
    root["bulmaCarousel"] = factory();
})

Import

<script src="static/js/bulma-carousel.js"></script>

I/O Contract

Inputs

Name	Type	Required	Description
DOM elements	HTML	Yes	Carousel container elements with Bulma CSS classes

Outputs

Name	Type	Description
Carousel UI	DOM	Interactive carousel with navigation, pagination, autoplay

Usage Examples

<!-- Include in HTML page -->
<link rel="stylesheet" href="static/css/bulma.css">
<script src="static/js/bulma-carousel.js"></script>

<div class="carousel">
  <div class="item-1">Slide 1</div>
  <div class="item-2">Slide 2</div>
</div>

<script>
bulmaCarousel.attach('.carousel', {
  autoplay: true,
  slidesToShow: 1,
});
</script>