I want to display a brand logo carousel slider like this one with a Dash app: https://bbbootstrap.com/snippets/clients-brand-logo-carousel-slider-20683486
I have imported the ressources as external_scripts and external_stylesheets and converted the html code to dash. What I get is a slider-div that does not display any images: slider not working
Can anyone see the mistake(s) in this? Or is this simply not possible in Dash? Any help would be highly appreciated.
The app-Layout looks like this:
carousel_js = $(document).ready(function(){
if($('.brands_slider').length)
{
var brandsSlider = $('.brands_slider');
brandsSlider.owlCarousel(
{
loop:true,
autoplay:true,
autoplayTimeout:5000,
nav:false,
dots:false,
autoWidth:true,
items:8,
margin:42
});
if($('.brands_prev').length)
{
var prev = $('.brands_prev');
prev.on('click', function()
{
brandsSlider.trigger('prev.owl.carousel');
});
}
if($('.brands_next').length)
{
var next = $('.brands_next');
next.on('click', function()
{
brandsSlider.trigger('next.owl.carousel');
});
}
}
});
app.layout = html.Div(
className="brands",
children=[
html.Script(
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
),
html.Script(
src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"
),
html.Div(
className="container",
children=[
html.Div(
className="row",
children=[
html.Div(
className="col",
children=[
html.Div(
className="brands_slider_container",
children=[
html.Div(
className="owl-carousel owl-theme brands_slider",
children=[
html.Div(
className="owl-item",
children=[
html.Div(
className="brands_item d-flex flex-column justify-content-center",
children=[
html.Img(
src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561819026/brands_1.jpg",
alt="")
])
]),
# Add more items here:
],
)
],
)
],
)
],
)
],
),
html.Script(src=carousel_js)
])
(I expected the slider to display the brand logos and let them slide slowly from right to left.)
