How to put the HTML output with overlay inside the OwlCarousel

Question

I have a slider in my page and every slider has it's own overlay descriptions and this descriptions are in the HTML format.

In my admin module there is a setting there that the user can create their own slider images with custom message using CKEditor.

And my problem is when I try to display the descriptions in the slider it's just plain HTML code.

Here's a bit of my code:

Controller Part

foreach($results as $result) {

            if ($result['banner_image'] && file_exists(DIR_IMAGE . $result['banner_image'])) {
                $image = $this->model_tool_image->resize($result['banner_image'], 40, 40);
                $banner_image_large = HTTP_IMAGE . $result['banner_image'];
            } else {
                $image = $this->model_tool_image->resize('no_image.jpg', 40, 40);
            }

            $url = '&banner_id=' . (int)$result['banner_id'];

            $this->data['banners'][] = array(
                'banner_id' => $result['banner_id'],
                'banner_image' => $image,
                'banner_image_large' => $banner_image_large, // here's the image to be use in the slider
                'code_description' => $result['banner_description'], //here's the raw HTML formatted description
                'description' => strip_tags(html_entity_decode($result['banner_description'])),
                'banner_link' => $result['banner_link'],
                'action' => $this->url->link('project/banner_slider/update', 'token=' . $this->session->data['token'] . $url, 'SSL')
            );

        }

In my View

<h1>Carousel Demo</h1>

    <div id="owl-demo" class="owl-carousel owl-theme">
        <?php foreach($banners as $banner) { ?>
            <div class="item">
                <div class="textoverlay"><?php echo $banner['code_description']; ?></div> <!-- overlay the decription -->
                <img src="<?php echo $banner['banner_image_large']; ?>" />
            </div>
        <?php } ?>
    </div>

Here's some CSS

#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
}

.textoverlay{
    position: absolute;
    display:block;
 }

And JS:

$('#owl-demo').owlCarousel({
    autoPlay : 3000,
    stopOnHover : true,
    navigation : false, // Show next and prev buttons
    slideSpeed : 300,
    paginationSpeed : 400,
    singleItem:true,
    autoHeight : true,
    transitionStyle:"fade"
});

Answer 1

Ok I solved it by using html_entity_decode() function

Answer 2

surround the raw html with $.parseHTML("your html here");