Consider Supporting Hyperlinks in Carousel Images

[mapix]

Consider Supporting Hyperlinks in Carousel Images

[tcbegley]

Thanks for the contribution! I made a new prerelease with your changes. Please try it and lmk if it solves your problem.

pip install dash-bootstrap-components==1.5.0rc4

[tcbegley]

Hi @mapix

Thanks for the suggestion! I actually went ahead an implemented this independently as I didn't notice your final comment, sorry about that. You can see my changes in #971 and #973. You can also try it by installing the pre-release I made

pip install dash-bootstrap-components==1.5.0rc3

If you do try it with your app, I'd be keen to know how you get on.

There's a few differences with your implementation, including support for internal links, and making use of the as prop in Carousel.Item which means we don't have to create extra HTML elements that might interfere with Bootstrap's CSS.

I did however fail to implement the target attribute, if you want to submit a PR adding that to my changes I would accept such a change. lmk if you would be interested and think this could be a useful feature.

Here's an example I tested my changes with:

import dash_bootstrap_components as dbc
from dash import Dash, Input, Output, dcc, html

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

DBC_DOCS = "https://dash-bootstrap-components.opensource.faculty.ai/"
HOME_LAYOUT = dbc.Carousel(
    items=[
        {
            "key": "1",
            "src": f"{DBC_DOCS}/static/images/slide1.svg",
            "href": "https://google.com",
        },
        {
            "key": "2",
            "src": f"{DBC_DOCS}/static/images/slide2.svg",
            "href": "/internal",
        },
        {
            "key": "3",
            "src": f"{DBC_DOCS}/static/images/slide3.svg",
            "href": "/internal",
            "external_link": True,
        },
    ],
    controls=True,
    indicators=True,
)

app.layout = dbc.Container(
    [dcc.Location(id="url"), html.Div(id="contents")],
    class_name="p-5",
)


@app.callback(Output("contents", "children"), Input("url", "pathname"))
def navigate(pathname):
    if pathname == "/":
        return HOME_LAYOUT
    elif pathname == "/internal":
        return "Some internal page..."
    return "404: Not Found..."


if __name__ == "__main__":
    app.run_server(debug=True)

[mapix]

@tcbegley

1.5.0rc3 looks good, but in my scenario, Carousel is in a Portal page, and it needs to be used to navigate multiple times to the sub applications. Therefore, customization of the target attribute is necessary. I added this attribute in #975 .

[mapix]

@tcbegley
It works, Thank you very much !!!

[tcbegley]

Great! Will make a full release in the next few days

[tcbegley]

These changes are now in the latest release.