# Can't get Bootstrap Carousel to work (with external scripts) **URL:** \ **Category:** Dash Python\ **Tags:** question\ **Created:** [October 12, 2023, 6:06pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288 "2023-10-12T18:06:12Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![mayushii21](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mayushii21/32/25766_2.png) [@mayushii21](https://community.plotly.com/u/mayushii21)\ **Post date:** [October 12, 2023, 6:06pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/1 "2023-10-12T18:06:12Z")
I’m trying to use Bootstrap’s Carousel element because the component from dbc doesn’t support anything but images, and I want a carousel for dcc.Graph components. So to start off, I tried making a minimal example using the official [bootstrap carousel](https://getbootstrap.com/docs/4.0/components/carousel/) example as a guide… but it doesn’t work (the contents don’t “carouse”), and I don’t know why. Here is the code: ```auto import dash from dash import html external_scripts = [ { "src": "https://code.jquery.com/jquery-3.3.1.slim.min.js", "integrity": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", "crossorigin": "anonymous", }, { "src": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js", "integrity": "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM", "crossorigin": "anonymous", }, ] external_stylesheets = [ { "href": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css", "rel": "stylesheet", "integrity": "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", "crossorigin": "anonymous", } ] app = dash.Dash( __name__ , external_scripts=external_scripts, external_stylesheets=external_stylesheets, ) app.layout = html.Div( [ html.Div( id="carouselExampleSlidesOnly", className="carousel slide", **{"data-ride": "carousel"}, children=[ html.Div( className="carousel-inner", children=[ html.Div( className="carousel-item active", children=[html.P("one")], ), html.Div( className="carousel-item", children=[html.P("two")], ), html.Div( className="carousel-item", children=[html.P("three")], ), ], ) ], ) ] ) if __name__ == " __main__": app.run_server(debug=True) ``` What is interesting, is that if you check the browsers inspect tool, then everything needed seems to be in place. After removing all dash related addons, the remaining html works as expected, as can be seen here on [jsfiddle](https://jsfiddle.net/rhgb9cjp/): [https://jsfiddle.net/rhgb9cjp/](https://jsfiddle.net/rhgb9cjp/) Any help would be much appreciated, as I’ve also tried using Carousel from dash\_trich\_components, but it is extremely buggy and no longer maintained. I’m almost at the point I regret not just making my entire project in raw html/css/js. P.s. I’m not a very advanced web developer, so if I’m missing something obvious here, my bad. I spent an entire day on this, and can’t seem to find what’s wrong ---
**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\ **Post date:** [October 17, 2023, 9:22am UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/2 "2023-10-17T09:22:01Z")
HI @mayushii21 welcome to the forums. If the carousel is the only content of your app, you could emulate this, I think this thread might be helpful: > [@Is it possible to return a different layout to the same Output in plotly](https://community.plotly.com/t/is-it-possible-to-return-a-different-layout-to-the-same-output-in-plotly/76709/10): > > HI @RalphLawrence23 here an MRE using dash pages, navigation via icons in a navbar import dash from dash import dcc, html, callback, Input, Output, ctx import dash\_bootstrap\_components as dbc from collections import deque external\_stylesheets = [dbc.themes.FLATLY, dbc.icons.BOOTSTRAP,] app = dash.Dash( \_\_name\_\_, use\_pages=True, suppress\_callback\_exceptions=True, external\_stylesheets=external\_stylesheets, ) page\_paths = deque([page['path'] for page in dash.page\_regi… ---
**Author:** ![mayushii21](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mayushii21/32/25766_2.png) [@mayushii21](https://community.plotly.com/u/mayushii21)\ **Post date:** [October 17, 2023, 10:37am UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/3 "2023-10-17T10:37:30Z")
Thank you for the response, but the carousel is only a small part of my app, and though the thread does partially achieve what I was looking for, it does not solve the problem as to why using external javascript doesn’t work. It seems extreemly overly complicated to go through building a carousel with dash components and complicated callbacks, when multiple existing solutions already exist in javascript. What if I wanted something more advanced, like a 3d circular carousel? The solution can easily be found in js, but I can’t even begin to imagin how to impliment it in raw dash… That said, I’m more of a beginner than anything. The response just above yours in that thread is pretty much what I want, as I don’t need buttons, just an automatic carousel. But I also want the carousel to auto pause when someone hovers a mouse above it, and I want it to have slideshow like transitions (slide to the left, instead of just replace), yet I can’t seem to figure out how to do that. In the meantime, react-slick, as well as other js implementations exist and do exactly what I want. So basically, I would really like to figure out how to properly incorporate javasctipt into my dash app and understand what it is I’m doing wrong. Big thanks for sharing that thread! I wouldn’t’ve found it with that name 😅 ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [October 17, 2023, 2:30pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/4 "2023-10-17T14:30:54Z")
Hello @mayushii21, Welcome to the community! When I run your example… it works exactly as designed… Cool find, btw. What version of Dash are you running? ---
**Author:** ![mayushii21](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mayushii21/32/25766_2.png) [@mayushii21](https://community.plotly.com/u/mayushii21)\ **Post date:** [October 17, 2023, 2:44pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/5 "2023-10-17T14:44:05Z")
@jinnyzor when you run the dash example it works the same as [jsfiddle](https://jsfiddle.net/rhgb9cjp/)? I just updated to the latest Dash - 2.14.0, and nothing happens… it just shows “one” and that’s it, no changes ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [October 17, 2023, 2:45pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/6 "2023-10-17T14:45:19Z")
Correct. It works just as in your example. Make sure your mouse isnt over the div accidentally. XD Also, check for console errors ---
**Author:** ![mayushii21](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mayushii21/32/25766_2.png) [@mayushii21](https://community.plotly.com/u/mayushii21)\ **Post date:** [October 17, 2023, 2:48pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/7 "2023-10-17T14:48:17Z")
huh… interesting and strange 🤔 I get no errors, and my mouse isn’t even on my brouser… Tried different browsers btw, and it doesn’t work for me… I even tried messing with app.index\_string and no change… I don’t get it ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [October 17, 2023, 2:49pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/8 "2023-10-17T14:49:46Z")
Try dropping dash to 2.12, I am running on 2.10.2 ---
**Author:** ![mayushii21](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mayushii21/32/25766_2.png) [@mayushii21](https://community.plotly.com/u/mayushii21)\ **Post date:** [October 17, 2023, 2:53pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/9 "2023-10-17T14:53:46Z")
nope, just created a clean environment and installed 2.10.2 and it doesn’t work for me… ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [October 17, 2023, 2:54pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/10 "2023-10-17T14:54:39Z")
What version of Flask do you have? ---
**Author:** ![mayushii21](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mayushii21/32/25766_2.png) [@mayushii21](https://community.plotly.com/u/mayushii21)\ **Post date:** [October 17, 2023, 2:57pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/11 "2023-10-17T14:57:22Z")
flask version is 2.2.5 - the default that got installed when installing dash. Before I had 2.2.2, didn’t work then either ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [October 17, 2023, 2:58pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/12 "2023-10-17T14:58:16Z")
What does your head look like? ---
**Author:** ![mayushii21](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mayushii21/32/25766_2.png) [@mayushii21](https://community.plotly.com/u/mayushii21)\ **Post date:** [October 17, 2023, 3:04pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/13 "2023-10-17T15:04:18Z")
Something like this, if this is what you mean: ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/1/3/13b93c1ef465990e4881f8fe814cb7d75259016a.png) a total of 100k+ characters, so I can’t paste the whole thing here ---
**Author:** ![mayushii21](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mayushii21/32/25766_2.png) [@mayushii21](https://community.plotly.com/u/mayushii21)\ **Post date:** [October 17, 2023, 3:21pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/14 "2023-10-17T15:21:54Z")
@jinnyzor I tried deploying it to [https://mayushii.pythonanywhere.com/](https://mayushii.pythonanywhere.com/) just to check maybe it’s something with how my pc+browser works, but… this doesn’t work either, nor does it work on my phone. Could you check if this works for you? ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [October 17, 2023, 3:37pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/15 "2023-10-17T15:37:32Z")
I think it has to do with the timing of when the script runs. Open your link in a new tab, do not view it until it is completely loaded, and then navigate to it. ---
**Author:** ![mayushii21](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mayushii21/32/25766_2.png) [@mayushii21](https://community.plotly.com/u/mayushii21)\ **Post date:** [October 17, 2023, 3:44pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/16 "2023-10-17T15:44:29Z")
I just tried, and it doesn’t work 😕 ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [October 17, 2023, 3:53pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/17 "2023-10-17T15:53:21Z")
Try this: ```auto import dash from dash import html, Output, Input external_scripts = [ { "src": "https://code.jquery.com/jquery-3.3.1.slim.min.js", "integrity": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", "crossorigin": "anonymous", }, { "src": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js", "integrity": "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM", "crossorigin": "anonymous", }, ] external_stylesheets = [ { "href": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css", "rel": "stylesheet", "integrity": "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", "crossorigin": "anonymous", } ] app = dash.Dash( __name__ , external_scripts=external_scripts, external_stylesheets=external_stylesheets, ) app.layout = html.Div( [ html.Div( id="carouselExampleSlidesOnly", className="carousel slide", **{"data-ride": "carousel"}, children=[ html.Div( className="carousel-inner", children=[ html.Div( className="carousel-item active", children=[html.P("one")], ), html.Div( className="carousel-item", children=[html.P("two")], ), html.Div( className="carousel-item", children=[html.P("three")], ), ], ) ], ) ] ) app.clientside_callback( """function () { var ClassName$2 = { CAROUSEL: 'carousel', ACTIVE: 'active', SLIDE: 'slide', RIGHT: 'carousel-item-right', LEFT: 'carousel-item-left', NEXT: 'carousel-item-next', PREV: 'carousel-item-prev', ITEM: 'carousel-item', POINTER_EVENT: 'pointer-event' }; var Selector$2 = { ACTIVE: '.active', ACTIVE_ITEM: '.active.carousel-item', ITEM: '.carousel-item', ITEM_IMG: '.carousel-item img', NEXT_PREV: '.carousel-item-next, .carousel-item-prev', INDICATORS: '.carousel-indicators', DATA_SLIDE: '[data-slide], [data-slide-to]', DATA_RIDE: '[data-ride="carousel"]' }; var Carousel = window.bootstrap.Carousel var carousels = [].slice.call(document.querySelectorAll(Selector$2.DATA_RIDE)); for (var i = 0, len = carousels.length; i < len; i++) { var $carousel = $(carousels[i]); Carousel._jQueryInterface.call($carousel, $carousel.data());} return window.dash_clientside.no_update }""", Output('carouselExampleSlidesOnly', 'id'), Input('carouselExampleSlidesOnly', 'id') ) if __name__ == " __main__": app.run_server(debug=True) ``` ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [October 17, 2023, 3:56pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/18 "2023-10-17T15:56:43Z")
Check out Bootstrap’s recommended way to apply here: > [@Can't get Bootstrap Carousel to work (with external scripts)](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/21): > > Actually, here is their suggested version: import dash from dash import html, Output, Input external\_scripts = [ { "src": "https://code.jquery.com/jquery-3.3.1.slim.min.js", "integrity": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", "crossorigin": "anonymous", }, { "src": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js", "integrity": "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDs… * * * OLD And here is the cleaner version since we know what you want to spin up: ```auto import dash from dash import html, Output, Input external_scripts = [ { "src": "https://code.jquery.com/jquery-3.3.1.slim.min.js", "integrity": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", "crossorigin": "anonymous", }, { "src": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js", "integrity": "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM", "crossorigin": "anonymous", }, ] external_stylesheets = [ { "href": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css", "rel": "stylesheet", "integrity": "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", "crossorigin": "anonymous", } ] app = dash.Dash( __name__ , external_scripts=external_scripts, external_stylesheets=external_stylesheets, ) app.layout = html.Div( [ html.Div( id="carouselExampleSlidesOnly", className="carousel slide", **{"data-ride": "carousel"}, children=[ html.Div( className="carousel-inner", children=[ html.Div( className="carousel-item active", children=[html.P("one")], ), html.Div( className="carousel-item", children=[html.P("two")], ), html.Div( className="carousel-item", children=[html.P("three")], ), ], ) ], ) ] ) app.clientside_callback( """function (id) { var $carousel = $(`#${id}`) var Carousel = window.bootstrap.Carousel Carousel._jQueryInterface.call($carousel, $carousel.data()); return window.dash_clientside.no_update }""", Output('carouselExampleSlidesOnly', 'id'), Input('carouselExampleSlidesOnly', 'id') ) if __name__ == " __main__": app.run_server(debug=True) ``` ---
**Author:** ![mayushii21](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mayushii21/32/25766_2.png) [@mayushii21](https://community.plotly.com/u/mayushii21)\ **Post date:** [October 17, 2023, 4:00pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/19 "2023-10-17T16:00:27Z")
it works! But how come it doesn’t work without the callback? Is that a bug that will be fixed, or is that just how dash works? ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [October 17, 2023, 4:04pm UTC](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288/20 "2023-10-17T16:04:21Z")
Its a ~~flaw~~ feature in bootstrap’s code, ~~it is assuming that when you add the script and the webpage that everything is already loaded to the DOM tree.~~ it loops through the DOM tree and auto applies carousel to any that match what it is looking for. This is not the case for Dash, as the original layout is only available at the time that bootstrap goes through the DOM tree. I just found the function that bootstrap was calling when the script was added and retriggered it once the element was fully rendered by Dash. Check out the order in which the elements are requested in the Network tab: ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/f/4fba265aa9d3c092dbdce6bb1bd8717c17714fb0.png) [Next page](https://community.plotly.com/t/cant-get-bootstrap-carousel-to-work-with-external-scripts/79288.md?page=2)