def get_ticker_carousel(tickers):
return dtc.Carousel([
dbc.Card([
dbc.CardBody([
html.H6(ticker['market']['name'], className="card-subtitle"),
html.H4(f"{get_base_name(ticker)} / {ticker['target']}",
className='card-title'),
html.H5(f"Last Price: {ticker['last']: .7f}",
className="card-text"),
html.P(f"Volume: {round(ticker['volume'], 2)}",
className="card-text"),
dbc.CardLink('Trade URL',
href=ticker['trade_url'],
className='fas fa-link'),
],
className='card-block text-center'),
],
color='secondary',
style={
"height": "11rem",
"border-radius": "15px"
}) for ticker in tickers
],
slides_to_scroll=1,
swipe_to_slide=True,
variable_width=True,
center_mode=False,
infinite=True,
autoplay=True,
speed=2000,
arrows=False)
def create_carousel(titles, poster_links):
carousel = dtc.Carousel([
carousel_card(title, poster_links[i]) for i, title in enumerate(titles)
],
slides_to_scroll=1,
swipe_to_slide=True,
autoplay=False,
infinite=True,
arrows=True,
dots=True,
variable_width=True,
center_mode=True,
responsive=[{
'breakpoint': 991
}],
style={
'margin-top': '15px',
'margin-bottom': '20px'
})
return carousel
def Stacks():
stacks = html.Div([
dtc.Carousel([
html.Div(html.Img(alt=i['name'], src=i['image']),
className="item padding16 margin16 radius8 white_bg")
for i in stacks_data
],
slides_to_scroll=1,
swipe_to_slide=True,
autoplay=True,
speed=2000,
variable_width=True,
center_mode=True,
responsive=[{
'breakpoint': 991,
'settings': {
'arrows': False
}
}])
],
className="stacks padding16")
return stacks
],
className="testeee",
id="sidebar",
bg_color="blue"),
html.Div(id="page_content",
style={
"maxWidth": "1400px",
'height': '1000px',
"overflowY": "auto"
}),
html.Div([
dtc.Carousel(
content,
dots=False,
arrows=True,
infinite=True,
speed=500,
slides_to_show=3,
slides_to_scroll=1,
responsive=responsive,
),
dtc.ThemeToggle(bg_color_dark='red',
icon_color_dark='blue',
bg_color_light='pink',
icon_color_light='green',
tooltip_text='teeext'),
dtc.Card(link='link',
image='image',
title='title',
description='description',
badges=['trich', 'dash', 'web-dev'],
git='git',
def crear_carousel(product_list):
carrusel = dtc.Carousel([
dbc.Container([
dbc.Card([
dbc.CardBody([
html.H6('#1'),
html.P(product_list[0].upper(),
style={'fontSize': 11},
className="card-title"),
])
],
style={
"size": "8rem",
"height": "100px",
"width": "200px"
},
color='secondary',
outline=True)
]),
dbc.Container([
dbc.Card([
dbc.CardBody([
html.H6('#2'),
html.P(product_list[1].upper(),
style={'fontSize': 11},
className="card-title"),
])
],
style={
"size": "8rem",
"height": "100px",
"width": "200px"
},
color='secondary',
outline=True)
]),
dbc.Container([
dbc.Card([
dbc.CardBody([
html.H6('#3'),
html.P(product_list[2].upper(),
style={'fontSize': 11},
className="card-title"),
])
],
style={
"size": "8rem",
"height": "100px",
"width": "200px"
},
color='secondary',
outline=True)
]),
dbc.Container([
dbc.Card([
dbc.CardBody([
html.H6('#4'),
html.P(product_list[3].upper(),
style={'fontSize': 11},
className="card-title"),
])
],
style={
"size": "8rem",
"height": "100px",
"width": "200px"
},
color='secondary',
outline=True)
]),
dbc.Container([
dbc.Card([
dbc.CardBody([
html.H6('#5'),
html.P(product_list[4].upper(),
style={'fontSize': 11},
className="card-title"),
])
],
style={
"size": "8rem",
"height": "100px",
"width": "200px"
},
color='secondary',
outline=True)
]),
dbc.Container([
dbc.Card([
dbc.CardBody([
html.H6('#6'),
html.P(product_list[5].upper(),
style={'fontSize': 11},
className="card-title"),
])
],
style={
"size": "8rem",
"height": "100px",
"width": "200px"
},
color='secondary',
outline=True)
]),
dbc.Container([
dbc.Card([
dbc.CardBody([
html.H6('#7'),
html.P(product_list[6].upper(),
style={'fontSize': 11},
className="card-title"),
])
],
style={
"size": "8rem",
"height": "100px",
"width": "200px"
},
color='secondary',
outline=True)
]),
dbc.Container([
dbc.Card([
dbc.CardBody([
html.H6('#8'),
html.P(product_list[7].upper(),
style={'fontSize': 11},
className="card-title"),
])
],
style={
"size": "8rem",
"height": "100px",
"width": "200px"
},
color='secondary',
outline=True)
]),
dbc.Container([
dbc.Card([
dbc.CardBody([
html.H6('#9'),
html.P(product_list[8].upper(),
style={'fontSize': 11},
className="card-title"),
])
],
style={
"size": "8rem",
"height": "100px",
"width": "200px"
},
color='secondary',
outline=True)
]),
dbc.Container([
dbc.Card([
dbc.CardBody([
html.H6('#10'),
html.P(product_list[9].upper(),
style={'fontSize': 11},
className="card-title"),
])
],
style={
"size": "8rem",
"height": "100px",
"width": "200px"
},
color='secondary',
outline=True)
]),
],
slides_to_scroll=1,
swipe_to_slide=True,
autoplay=True,
speed=500,
variable_width=False,
center_mode=False,
responsive=[{
'breakpoint': 991,
'settings': {
'arrows': True
}
}])
return carrusel
dtc.Carousel([
html.Img(
className="Imagen_slider1",
src=
"https://static.wixstatic.com/media/e9606e_52e15af7d9b54c4ca1b51a67e4abb8f3~mv2.png"
),
html.Img(
className="Imagen_slider2",
src=
"https://static.wixstatic.com/media/e9606e_3057be61ba094ba684ac33e852ff4702~mv2.png"
),
html.Img(
className="Imagen_slider3",
src=
"https://static.wixstatic.com/media/e9606e_a01463d424f8451b93e125b093aa2a71~mv2.png"
),
html.Img(
className="Imagen_slider4",
src=
"https://static.wixstatic.com/media/e9606e_0c228475e917406f9367b43a79ffdf6d~mv2.png"
),
html.Img(
className="Imagen_slider5",
src=
"https://static.wixstatic.com/media/e9606e_7f2dde5a4cc541859bdf5599d4b2562d~mv2.png"
),
html.Img(
className="Imagen_slider6",
src=
"https://static.wixstatic.com/media/e9606e_adf6f666ace4425f9aca6cdf6dd0c732~mv2.png"
),
],
slides_to_scroll=1,
swipe_to_slide=True,
autoplay=True,
speed=500,
variable_width=True,
center_mode=True,
responsive=[{
'breakpoint': 991,
'settings': {
'arrows': False
}
}]
), # AQUI TERMINA EL SLIDER LA CONFIGURACIÓN SE DEJA TAL CUAL
import dash_trich_components as dtc
import dash_html_components as html
carousel = dtc.Carousel([
html.Div('slide 1'),
html.Div('slide 2'),
html.Div('slide 3'),
html.Div('slide 4'),
html.Div('slide 5'),
html.Div('slide 6')
],
slides_to_scroll=1,
swipe_to_slide=True,
autoplay=True,
speed=2000,
variable_width=True,
center_mode=True,
responsive=[
{
'breakpoint': 991,
'settings': {
'arrows': False
}
}]
)
