Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
A Streamlit custom component that displays a modern and customizable carousel using the Ant Design library.
You can install the st_ant_carousel component using pip:
pip install st_ant_carousel
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)
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"
}
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
An integer value representing the automatic scrolling interval in milliseconds. The default value is 3000.
Example:
autoplaySpeed = 5000
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"
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
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
A string value representing the transition interpolation function name. The default value is "linear".
Example:
easing = "ease-in-out"
A string value representing the transition effect name. Accepted values are "scrollx" (default) and "fade".
Example:
effect = "fade"
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
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
An integer value representing the transition animation duration in milliseconds. The default value is 500.
Example:
animationSpeed = 1000
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
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
An integer value representing the height of the carousel in pixels. The default value is 200.
Example:
height = 300
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
Streamlit Component for ANT Carousel
We found that st-ant-carousel demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.