Text Hero Slider

[lesliekirk]

Is it possible to use the Hero Slider to rotate text banners instead of images?

[Matt Zimmermann]

Hi Leslie,

Should be able to.

[lesliekirk]

I think I probably have some sort of CSS issue going one with my attempt. I can see the slides rotating (in the console), but I cannot see the text content itself. The site is behind a wall so I can't share

[Matt Zimmermann]

Hi Leslie,

I would start by using the inspector to see if the slides have width and height. Then I would check their visibility to make sure they are visible, not hidden, and have opacity.

[lesliekirk]

Hi Leslie,

I would start by using the inspector to see if the slides have width and height. Then I would check their visibility to make sure they are visible, not hidden, and have opacity.

If I change the .x-carousel visibility to visible I can see everything just fine. Why would it be "stuck" to visibility:hidden;?

[Matt Zimmermann]

Hi Leslie,

Since you are not using images, it looks like Roundabout has nothing to "pre-load" so the visibility is not changed. To get around that, add the class x-carousel--is-loaded to your x-carousel element and it should work.

[lesliekirk]

Hi Leslie,

Since you are not using images, it looks like Roundabout has nothing to "pre-load" so the visibility is not changed. To get around that, add the class x-carousel--is-loaded to your x-carousel element and it should work.

And where would I find the element?

[Matt Zimmermann]

Navigate to ReadyTheme -> Content Sections

<section class="x-carousel" data-hook="hero-carousel">

Would become

<section class="x-carousel x-carousel--is-loaded" data-hook="hero-carousel">

[lesliekirk]

Navigate to ReadyTheme -> Content Sections

<section class="x-carousel" data-hook="hero-carousel">

Would become

<section class="x-carousel x-carousel--is-loaded" data-hook="hero-carousel">

I was so close...I replaced it instead of adding it. I need to go back to Reading Comprehension 101. Thanks, Matt!