Socket
Socket
Sign inDemoInstall

st-ant-carousel

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

st-ant-carousel

Streamlit Component for ANT Carousel


Maintainers
1

A Streamlit custom component that displays a modern and customizable carousel using the Ant Design library.

Streamlit App

Installation

You can install the st_ant_carousel component using pip:

pip install st_ant_carousel

Usage

Here's a simple example to get you started:

import streamlit as st
from st_ant_carousel import st_ant_carousel

content = [
    {
        "style": {"color": "red", "fontSize": "20px"},
        "content": "<b>1. Entry</b>"
    },
    {
        "style": {"color": "blue", "fontSize": "20px"},
        "content": "<b>2. Entry</b>"
    }
]

carousel_style = {
    "background-color": "#f0f2f5",
    "border-radius": "8px",
    "box-shadow": "0 4px 6px rgba(0, 0, 0, 0.1)",
    "padding": "20px"
}

st_ant_carousel(content, carousel_style=carousel_style)

Parameters

content

A list of dictionaries representing each slide in the carousel. Each dictionary should have a "style" and "content" key. The "style" key should contain CSS properties in the form of a dictionary, and the "content" key should contain the HTML code for the slide content.

Example:

content = [
    {
        "style": {"color": "red", "fontSize": "20px"},
        "content": "<b>1. Entry</b>"
    },
    {
        "style": {"color": "blue", "fontSize": "20px"},
        "content": "<b>2. Entry</b>"
    }
]

A dictionary containing the CSS properties for styling the carousel container. This can be used to customize the appearance of the carousel.

Example:

carousel_style = {
    "background-color": "#f0f2f5",
    "border-radius": "8px",
    "box-shadow": "0 4px 6px rgba(0, 0, 0, 0.1)",
    "padding": "20px"
}

autoplay

A boolean value indicating whether the carousel should scroll automatically. Set to True to enable autoplay, and False to disable it (default).

Example:

autoplay = True

autoplaySpeed

An integer value representing the automatic scrolling interval in milliseconds. The default value is 3000.

Example:

autoplaySpeed = 5000

dotPosition

A string value representing the position of the dots. The accepted values are "top", "bottom", "left", and "right". The default value is "bottom".

Example:

dotPosition = "top"

dots

A boolean value indicating whether to show the dots. Set to True to show the dots (default), and False to hide them.

Example:

dots = False

waitForAnimate

A boolean value indicating whether to wait for the animation when switching slides. Set to True to wait for the animation (default), and False to not wait.

Example:

waitForAnimate = False

easing

A string value representing the transition interpolation function name. The default value is "linear".

Example:

easing = "ease-in-out"

effect

A string value representing the transition effect name. Accepted values are "scrollx" (default) and "fade".

Example:

effect = "fade"

pauseOnDotsHover

A boolean value indicating whether to pause the carousel when hovering over the dots. Set to True to enable pausing, and False to disable it (default).

Example:

pauseOnDotsHover = True

pauseOnHover

A boolean value indicating whether to pause the carousel when hovering over the carousel. Set to True to enable pausing (default), and False to disable it.

Example:

pauseOnHover = False

animationSpeed

An integer value representing the transition animation duration in milliseconds. The default value is 500.

Example:

animationSpeed = 1000

vertical

A boolean value indicating whether the carousel should scroll vertically. Set to True to enable vertical scrolling, and False to disable it (default).

Example:

vertical = True

adaptiveHeight

A boolean value indicating whether the carousel should adapt to the height of the current slide. Set to True to enable adaptive height, and False to disable it (default).

Example:

adaptiveHeight = True

height

An integer value representing the height of the carousel in pixels. The default value is 200.

Example:

height = 300

key

A string value representing the key used to save the state of the widget. The default value is "first_carousel".

Example:

key = "custom_carousel_key"

FAQs


Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc