🔍 Code Extractor

A carousel/slider component that displays a list of objects in a horizontal scrollable interface using the Splide.js library.

Purpose

Carrousel is a Panel component that creates an interactive carousel widget for displaying multiple objects in a sliding interface. It inherits from ReactiveHTML for reactive rendering and NamedListLike for list-like behavior. The component integrates the Splide.js library to provide smooth carousel functionality with configurable display options (default: 6 items per page). It's designed for creating visual galleries, image sliders, or any collection of Panel objects that need to be displayed in a carousel format.

Source Code

class Carrousel(ReactiveHTML, NamedListLike):
    objects = param.List()

    _template = """
<style>
.splide__slide{
  text-align: center;
}
</style>
<div id="splide" class="splide" style="height:100%;width:100%;">
  <div class="splide__track" style="height:100%;width:100%;">
        <ul class="splide__list" id="carrouselslides">
            {% for object in objects %}
            <li id="slide" class="splide__slide">${object}</li>
            {% endfor %}
        </ul>
  </div>
</div>
"""
    _scripts = {
        "render": """
console.log("foo")
new Splide( splide , {
    perPage: 6,
    }).mount();      
"""
    }

    __javascript__ = ["https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"]
    __css__ = [
        "https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/themes/splide-default.min.css",
        "https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css",
        "https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide-core.min.css",
    ]
    def __init__(self, *objects, **params):
        NamedListLike.__init__(self, *objects, **params)
        ReactiveHTML.__init__(self, objects=self.objects, **params)

    @property
    def _child_names(self):
        return {"objects": self._names}

Parameters

Parameter Details

*objects: Variable number of positional arguments representing the objects to display in the carousel. These can be any Panel-compatible objects (widgets, panes, layouts, etc.) that will be rendered as individual slides.

**params: Keyword arguments passed to both parent classes. Can include any parameters accepted by ReactiveHTML or NamedListLike, such as 'name', 'width', 'height', and other Panel component parameters. The 'objects' parameter can also be passed as a keyword argument containing a list of objects to display.

Return Value

Instantiation returns a Carrousel object that is a fully functional Panel component. The object can be displayed in Panel applications, added to layouts, or served in Panel dashboards. The component renders as an HTML carousel with navigation controls provided by Splide.js.

Class Interface

Methods

Attributes

Dependencies

• param
• panel
• @splidejs/splide

Required Imports

import param
import panel as pn
from panel.reactive import ReactiveHTML
from panel.layout.base import NamedListLike

Usage Example

import panel as pn
from panel.reactive import ReactiveHTML
from panel.layout.base import NamedListLike
import param

# Define the Carrousel class (as provided)
class Carrousel(ReactiveHTML, NamedListLike):
    objects = param.List()
    # ... (rest of class definition)

# Create some objects to display
obj1 = pn.pane.Markdown('# Slide 1')
obj2 = pn.pane.Markdown('# Slide 2')
obj3 = pn.pane.Markdown('# Slide 3')
obj4 = pn.pane.Image('https://example.com/image1.jpg')
obj5 = pn.pane.Image('https://example.com/image2.jpg')
obj6 = pn.pane.Image('https://example.com/image3.jpg')

# Instantiate carousel with positional arguments
carousel1 = Carrousel(obj1, obj2, obj3, obj4, obj5, obj6)

# Or instantiate with keyword argument
carousel2 = Carrousel(objects=[obj1, obj2, obj3, obj4, obj5, obj6])

# Display in a Panel app
carousel1.servable()

# Access and modify objects
carousel1.objects.append(pn.pane.Markdown('# Slide 7'))
print(len(carousel1.objects))  # 7

Best Practices

• Ensure all objects passed to the carousel are Panel-compatible components (panes, widgets, or layouts)
• The carousel displays 6 items per page by default (perPage: 6 in Splide config); modify _scripts if different behavior is needed
• Objects can be dynamically added or removed by modifying the 'objects' list attribute, which will trigger reactive updates
• The component requires JavaScript to be enabled in the browser for carousel functionality
• CDN resources are loaded from jsdelivr.net; ensure network access or consider hosting resources locally for production
• The carousel inherits list-like behavior from NamedListLike, so standard list operations (append, remove, indexing) work on the objects
• Use the _child_names property to access named references to child objects
• The component automatically handles rendering and mounting of the Splide carousel on initialization
• Consider the visual size of objects when adding them to ensure consistent carousel appearance

Tags

Similar Components

AI-powered semantic similarity - components with related functionality:

• class options 47.6% similar

  A Panel-based UI class for managing slide release visibility in a study management system, allowing users to view and toggle the release status of slides at various hierarchical levels (Study, Group, Animal, Block, Slide).

  From: /tf/active/vicechatdev/options.py

• class SortableList 47.5% similar

  A reactive HTML component that displays a sortable and deletable list of items with drag-and-drop functionality using SortableJS library.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Scrollmenu 46.6% similar

  A horizontal scroll menu component that displays a series of clickable icons representing different stages of a pathology workflow, built using Panel's ReactiveHTML for enhanced CSS customization.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Toolbar 46.4% similar

  A reactive HTML toolbar component that displays social media links and a settings button, tracking the number of clicks on the settings icon.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Study_progress 46.2% similar

  A Panel ReactiveHTML component that displays study progress as a visual taskbar with completed and pending items represented by SVG icons.

  From: /tf/active/vicechatdev/resources/.ipynb_checkpoints/py2html-checkpoint.py