open up carousel options for slide to allow text.

Hi BSS devs,

I am looking to create a carousel that will allow me rotate testimonials for a client, but when using the carousel component delivered in one of your last releases, i don't seem to be able to remove the image element out of the slides that are provided in the component.

so 2 questions really.

1) Why is this? 2) Can full control over content for carousel slides be added into a future release.

for the record i know we can covert to html, but then i lose the ability of drag and drop, but for now the workaround is fine.

Thank you for the suggestion!

The carousel was made to handle the most common use case that Bootstrap supports - cycling through a bunch of images. We can add a "Type" dropdown in the Slide options which switches it from "Image" to "Custom", which will permit you to add any elements that you wish.

Do you think this would help with your use case?

Sure would Martin. Thanks

This would be a great feature! I'm trying to do a text carousel (to show testimonials) with the current functionality but just failing due to requiring a background image!

+1

@rebeccapersongmail-com, right now you have to use the Custom Code component to achieve this.

However, you can at least drag the Carousel component make all your carousel settings then right click on the Carousel element in the Overview pane and select Convert to HTML then right click it again and select Edit Code.

Here is some quick and dirty Custom Code for you.

<div class="carousel slide" data-ride="carousel" id="carousel-1">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <h1 class="text-center">Some text</h1>
        </div>
        <div class="item">
            <h1 class="text-center">another Some text</h1>
        </div>
        <div class="item">
            <h1 class="text-center">another another Some text</h1>
        </div>
    </div>
    <div><a href="#carousel-1"><i class="glyphicon glyphicon-chevron-left"></i><span>Previous</span></a>
        <a href="#carousel-1"><i class="glyphicon glyphicon-chevron-right"></i><span>Next</span></a>
    </div>
    <ol>
        <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2"></li>
    </ol>
</div>

Simple CSS

#carousel-1 .item{
   padding:100px 1em;
}

Saj

Also, you can add options for cool transitions, thumbnail carousel and video.

Great thankyou for this solution - haven't tried it out yet but will work on it today!

Happy to report that this is now available in version 2.3.3 which was just released. When you click on a Carousel Slide component, you will see a checkbox for showing/hiding the locked image. Slides can also accept lots of different types of components, making the Carousel much more flexible.

Great stuff, thanks Martin

Hi Martin,

just playing around with this - am not clear on getting rid of the locked background image. When i checkbox 'hidden' the whole carousel is hidden!

This is caused by they way the Bootstrap Carousel works. Once you hide the image there is nothing to give a height to the carousel. If you drop other content in the slide it should work.