How to put the HTML output with overlay inside the OwlCarousel - php

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

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

Answer 2

Ok I solved it by using html_entity_decode() function